javascript - for循环中的setTimeout不会打印连续值的解决方案

一、开始（问题点：不输出连续值，而是输出很多个相同值）

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

console.log(new Date, i);

其实上面的代码 不会 输出 0 1 2 3 4 5。只会输出 6 个 5。因为 setTimeout 是异步的，第 2-4行代码是进行“事件注册”的，而最后一行代码是 在主程序同步执行的，最后一行执行完后、主程序无任务、队列为空，然后就将“之前注册的异步事件”放入队列并执行，但是此时 var声明的 i 变量值已成是 5 。所以只会 连续输出 5.

二、解决方案

1、将 var 改成 let (具体原理我也说不太清、就不误人子弟了）

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

console.log(new Date, i);

2、利用 setTimeout 中的 第三个参数（第 3-n参数用于传入自己想要的一些参数，这样的话第一个参数 f 也要写代码去接受不了这些参数）进行传参。

for (var i = 0; i < 5; i++) {
    setTimeout(function(j) {
        console.log(new Date, j);
    }, 1000,i);
}

console.log(new Date, i);

3、将 for 里面的 i 传递进去，结合 IIFE 。

for (var i = 0; i < 5; i++) {
    (function(j){
        setTimeout(function() {
            //可以写成 i ，然后 第2行中的 j 可以省略，因为 i 会屏蔽外层的 i
            console.log(new Date, j); 
        }, 1000);
    })(i)
}

console.log(new Date, i);

4、跟 3 有点类似，利用 JS 函数传值 的特性。多写一个函数，将 i 传递过去。

var fn = function(j){
    setTimeout(function(){
        console.log(new Date, j); 
    }, 1000);
}

for (var i = 0; i < 5; i++) {
    fn(i);
}

console.log(new Date, i);