JavaScript 中 setTimeout 的 6个6问题

首先，我们来看一下下面的一段代码

let i
for (i = 0; i < 6; i++){
    setTimeout(()=>{
        console.log(i)
    },1000)
}

上面的代码会打印出 6 个 6，而不是 0，1，2，3，4，5

因为 i 为全局变量，当for循环执行时，setTimeout中的函数实际上并没有执行（也没有获取i的值，只是拿到了 ()=>{ console.log(i)} 这么一个函数），当循环结束之后，异步setTImeout开始执行6个函数，而此时i为6，所以会打印出6个6.

那么，我们如何实现打印出 0，1，2，3，4，5呢？

有三个方法：

• 使用一个变量来存储 i 的值
• 使用let语法糖
• 使用立即执行函数

//使用一个变量来存储 i 的值
let i
for (i = 0; i < 6; i++){
    let k = i
    setTimeout(()=>{
        console.log(k)
    },1000)
}
//此时k会把i从0-5的变化记录下来，而且由于每个k的作用域不同，k不会被覆盖
/*===============================================================================================*/

//使用let语法糖
for (let i = 0; i < 6; i++){
    setTimeout(()=>{
        console.log(i)
    },1000)
}
//for let语法糖会帮助我们记下i的值
/*===============================================================================================*/

//使用立即执行函数/
for(var i = 0; i < 6; i++){
    !function(j){
        setTimeout(()=>{
            console.log(j)
        },1000)
    }(i)
}
//需要注意：j只是一个形式参数，就算替换成i也不会有影响，所以可以写成以下形式
for(var i = 0; i < 6; i++){
    !function(i){
        setTimeout(()=>{
            console.log(i)
        },1000)
    }(i)
}