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

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

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

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

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之前，是怎么解决这个问题的呢？

1. 立即执行函数
   人为给 console.log(i); 创造作用域，保存i的值。

   for (var i = 0; i < 5; i++) { 
       (function(i){      //立刻执行函数
           setTimeout(function (){
               console.log(i);  
            },1000);  
       })(i);  
   }

   这里相当于一个立即执行函数，这样js的作用域就被限定在这个函数内了。

2. ES5的bind函数

    for (var i=1; i<=5; i++) {
     setTimeout( function timer(i) {
       console.log(i);
     }.bind(null,i), i*1000 );
   }

3. 利用setTimeout第三个参数
   setTimeout(func, delay, param1, param2, ...)
   第三个参数及以后的参数都可以作为 func 函数的参数

   for (var i=1; i<=5; i++) {
     setTimeout( function timer(i) {
       console.log(i);    
      }, i*1000,i );
   }

4. 把setTimeout用一个方法单独出来形成闭包

   var loop = function (i) {
     setTimeout(function timer() {
       console.log(i);  
     }, i*1000);
   };
   for (var i = 1;i <= 5; i++) {
     loop(i);
   }

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