setTimeout的理解

1、执行先后顺序

setTimeout（）有两个参数值，分别是函数、时间值（ms）.
这是因为 js 是单线程的，有一个事件队列机制，setTimeout 的回调会到了延迟时间，排队执行。

页面中所有由setTimeout定义的操作，都将放在同一个队列中依次执行。
而这个队列的执行时间需要等到函数调用栈执行完毕后才会执行，也就是等待所有的可执行代码执行完毕，才到setTimeout执行

举例1说明：console.log('one');     执行顺序1setTimeout(function(){console.log('two');   //4},0)Promise.resolve().then(function(){  console.log('three');  //3});console.log('four');  //2输出顺序：one  four  three   twosetTimeout(fn, 0)在下一轮“事件循环”开始时执行，
Promise.resolve()在本轮“事件循环”结束时执行，（es6）
console.log('one')则是立即执行，因此最先输出。

2、setTimeout循环

例:2：
for(var i=0;i<5;i++){setTimeout(function(){console.log(i);},1000*i);}每隔一秒输出一个5。结果： 5 5 5 5 5var 会存在变量提升，且for

这里连续输出了5个5，那如果我们想要让它循环后输出0 1 2 3 4呢
解决：①加个闭包

for(var i=0;i<5;i++){(function(i) {setTimeout(function(){console.log(i);},1000*i);})(i);   //函数的参数i，则函数内部对i保持引用}

②将例2的变量i用let申明即可。因为let是块级作用域，不存在变量提升
即只改 for（let i=0;i<5;i++）

如果有多个setTimeout函数，要根据对应时间值的大小，先执行值小的函数。

setTimeout的理解相关推荐

每日题(js)：setTimeout与setInterval（深入理解）
题目:setInterval/setTimeout 详细理解定时器:setTimeout setTimeout()方法设置一个定时器,该定时器在定时器到期后执行一个函数或指定的一段代码. var t ...
JavaScript下的setTimeout(fn,0)意味着什么？
近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...
boost log 能不能循环覆盖_前端基础进阶（十四）：深入核心，详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
nodejs的事件循环1
JavaScript的学习零散而庞杂,因此很多时候我们学到了一些东西,但是却没办法感受到自己的进步,甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直试图在寻找一条核心 ...
javascript中的一些核心知识点以及需要注意的地方
javascript中的一些核心知识点以及需要注意的地方原文:javascript中的一些核心知识点以及需要注意的地方前言近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来, ...
node.js - 收藏集
如何部署 Node.js 应用 - 后端 - 掘金当你熟悉 Node.js 之后很可能会自己写些小东西放在 VPS 上跑,比如说一个个人的 API 服务,或者是你的网站.这篇文章分享的内容不管你的 ...
Vue项目构建开发入门
Vue项目构建开发入门开篇:Vue CLI 3 项目构建基础大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
防抖和节流含义及区别图文详解秒懂
防抖和节流都是为解决短时间内频繁触发某个功能函数而导致的性能问题.比如,触发频率过高而导致响应速度跟不上,以致出现延迟,假死或卡顿的现象. 防抖图解:一件事情,计划5s以后触发,结果中途意外触发了, ...
长期维护更新，前端面试题整理
网上找到的各种面试题整理,长期更新.大部分答案整理来自网络,有问题的地方,希望大家能指出,及时修改;技术更新迭代,也会及时更新博客原地址: https://finget.github.io/2019 ...

setTimeout的理解

1、执行先后顺序

setTimeout的理解相关推荐

最新文章

热门文章