【前端芝士树】for循环 + setTimeout

【前端芝士树】for循环 + setTimeout

还记得这张const、let、var比较的表格吗

clipboard.png

是不是觉得没什么问题了？来看看下面的程序：

for(var i=0;i<5;i++){
    setTimeout(function(){
        console.log(i);
    })
} // 5 5 5 5 5
for(let i=0;i<5;i++){
    setTimeout(function(){
        console.log(i);
    })
}// 0 1 2 3 4

首先需要被提及的是setTimeout的事件机制，我们都知道js是单线程的，在它的事件队列中，同步优先于异步优先于回调。

事件循环与任务队列 事件循环只有一个，但任务队列可能有多个，任务队列可分为宏任务（macro-task）和微任务（micro-task）。XHR回调、事件回调（鼠标键盘事件）、setImmediate、setTimeout、setInterval、indexedDB数据库操作等I/O以及UI rendering都属于宏任务（也有文章说UI render不属于宏任务，目前还没有定论），process.nextTick、Promise.then、Object.observer(已经被废弃)、MutationObserver(html5新特性)属于微任务。注意进入到任务队列的是具体的执行任务的函数。比如上述例子setTimeout()中的timer函数。另外不同类型的任务会分别进入到他们所属类型的任务队列，比如所有setTimeout()的回调都会进入到setTimeout任务队列，所有then()回调都会进入到then队列。当前的整体代码我们可以认为是宏任务。事件循环从当前整体代码开始第一次事件循环，然后再执行队列中所有的微任务，当微任务执行完毕之后，事件循环再找到其中一个宏任务队列并执行其中的所有任务，然后再找到一个微任务队列并执行里面的所有任务，就这样一直循环下去。

而为什么用var和let定义i会出现不同的结果呢？答案出在作用域上。

• var 的作用域是函数级的，不属于for循环，当for循环结束开始调用函数回调的时候，就会往上寻找需要的i，最后找到了global下的i，此刻i为5。
• let 的作用域是块级的，所以每一次 for 循环，console.log(i); 都引用到 for 代码块作用域下的i，因为这样被引用，所以 for 循环结束后，这些作用域在 setTimeout 未执行前都不会被释放。

那么在ES6之前，是怎么解决这个问题的呢？

参考文章 for循环 + setTimeout 结合的烂大街的面试题 彻底理解setTimeout() - 简书