如何用for (var i=1； i＜=5； i++) 加 setTimeout 输出1、2、3 、4、5

for (var i=1; i<=5; i++) 加 setTimeout 如何输出1、2、3 、4、5

大家在笔试或者面试的时候，或多或少都做过这样的题吧！

请问下面代码的输出是什么？

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

对于这段代码我们一般期待的是分别打印数字1、2、3 、4、5一秒一个，然而实际上，它会打印5个6,同样也是一秒打印一个。

？？？为什么打印的不是1、2、3 、4、5？为什么打印的是**5个6**不是5个5？

为什么打印的是5个6不是5个5？

首先，来解释一下为什么会打印5个6，因为for循环的结束条件是 i<=5，所以当循环满足结束条件时 i 是6。所以，输出的结果5个6。

没理解的，可以按照for循环的执行顺序对照一下；

for循环执行顺序如下：

for(条件①；条件②；条件③){

循环体④

}

①②④③ ②④③ ②④③… …直到循环结束

为什么打印的不是1、2、3 、4、5？

这是因为在迭代期间，循环的每次迭代都对 i 拷贝。

这5个timer()在每次迭代中分离定义i，但是，这些闭包i都在同一作用域上，而它事实上是一个 i。所以，所有timer()都输出相同的 i 。

迭代中分离定义i没明白？

看完下面这段等价代码你就明白了

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

    var i=2;
    setTimeout( function timer(){
        console.log( i ); 
    }, i*1000 );

    var i=3;
    setTimeout( function timer(){
        console.log( i ); 
    }, i*1000 );

    var i=4;
    setTimeout( function timer(){
        console.log( i ); 
    }, i*1000 );

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

    var i=6;  //i<=5 结束循环
    //setTimeout( function timer(){
    //    console.log( i ); 
    //}, i*1000 );
    
    //输出 6 6 6 6 6

好了，这回知道了为什么打印的不是1、2、3 、4、5了，因为这些闭包绑定的i都在同一个作用域，后面的i把前面的i给覆盖了。

知道了问题出在哪里就好办了。只要闭包绑定当前作用域的i，就可以输出1、2、3 、4、5。

那么，怎么可以创建作用域呢！

创建作用域

可以用ES6的let定义迭代变量实现，因为用let定义的变量创建作用域。

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

   //输出 1 2 3 4 5

虽然用let输出了1、2、3 、4、5，但这很明显不符合标题的‘用for (var i=1; i<=5; i++) 输出1、2、3 、4、5’;

那还可以用什么方法在for循环中创建作用域呢！

方法一、 立即执行函数 – IIFE

在for循环中，通过给IIFE传参，实现输出1、2、3 、4、5；

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

   //输出 1 2 3 4 5

方法二、 catch

在for循环中，利用 try/catch 强制抛出一个错误i，然后在 catch() 子句中接收它，实现输出1、2、3 、4、5；

for (var i=1; i<=5; i++) {
    try {
        throw i;
    } catch (i) {
        console.log( i );
    }

 }

到此就回答了这个问题；

如果大家还有什么其他的想法，欢迎评论区交流！