JavaScript函数的执行时机

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

在学习js函数的时候遇到了一个很奇怪的现象，上面面这段代码执行的结果是

 // 运行结果 6 6 6 6 6 6

而不是我们想象中的

 // 运行结果 0 1 2 3 4 5

经过一番研究之后发现，是setTimeout函数执行的时机造成了这样的结果，在每一次循环中都会执行一个setTimeout，这个函数会在0ms之后调用，表意上是立即调用，但是实际上他的调用流程是这样的

// 执行顺序
for(i=0)
for(i=1)
for(i=2)
for(i=3)
for(i=4)
for(i=5)
// 此时i的值为6
setTimeout(i)
setTimeout(i)
setTimeout(i)
setTimeout(i)
setTimeout(i)
setTimeout(i)
// 所以最后会造成结果为 6 6 6 6 6 6

解决方法一：

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

将let i = 0放在for中时JS会在每次执行for的时候都创建一个变量来暂存此刻的i的值，这样每次执行setTimeout的时候获取到的就是每一次for循环暂存的值，所以得到的结果就为 0 1 2 3 4 5

解决方法二：

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

其实原理跟上面的差不多，就是用一个变量j在每次循环的时候暂存i的值，setTimeout最终打印暂存变量j