js函数的执行时机

先看代码，猜测一下会打印出什么


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

打印结果，如图

打印结果.png

对的，会打印出6个6，为什么会这样呢，不应该是打印出0-5嘛

解释如下：i = 0，i < 6，开始循环，然后setTimeout并不会执行，跳过setTimeout，进入下一次循环，i++ = 1，i < 6，跳过setTimeout。。。。。。直到i++ = 6，i 不小于6，循环结束，开始执行setTimeout，第一次执行setTimeout，i 的值为6，第二次执行setTimeout，i 的值为6，一共执行六次，所以打印出6个6。简而言之，循环先执行，执行六次后，此时 i 为6，再去执行setTimeout，执行六次，最后打印出6个6

我们可以用下面的方法解决

1.去掉最外面的let i = 0

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

2.使用闭包

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

3.利用 setTimeout 的第三个参数,将i传进去

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

4.利用 const 关键字

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

部分答案来自于知乎