JS 函数的执行时机

首先先看下面一段代码

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

执行结果为

6
6
6
6
6
6

结果为6个6而不是一开始认为的0 1 2 3 4 5的原因是：
setTimeout是异步执行，每一次for循环的时候，setTimeout都执行一次，但是里面的内容没有被执行，而是被放到了任务队列里，等待执行。只有主线上的任务执行完，才会执行任务队列里的任务。也就是说它会等到for循环全部运行完毕后，才会执行里面的打印，但是当for循环结束后此时i的值已经变成了6，因此虽然定时器跑了5秒，控制台上的内容依然是6。

---

那么如何打印出 0 1 2 3 4 5呢？

解决方案1：闭包

使用闭包是很经典的一种做法：

for (var i=0; i<6; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, 0 );
    })(i);
}

　　我们可以发现跟预期结果一致，依次输出0到5，因是因为实际参数跟定时器内部的i有强依赖。

　　通过闭包，将i的变量驻留在内存中，当输出j时，引用的是外部函数的变量值i，i的值是根据循环来的，执行setTimeout时已经确定了里面的的输出了。

解决方案2：拆分结构

我们还可以将setTimeout的定义和调用分别放到不同部分：

function timer(i) {
    setTimeout( console.log( i ), 0 );
}
for (var i=0; i<6;i++) {
    timer(i);
}

　　控制台上输出依然是依次输出0到5。

解决方案3：let

这里再来说一说使用es6的let来解决此问题：

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

　　这个例子与第一个相比，只是把var更改成了let，可是控制台的结果却是依次输出0到5。

　　因为for循环头部的let不仅将i绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域，通过var定义的变量是无法传入到这个函数执行域中的，通过使用let来声明块变量能作用于这个块，所以function就能使用i这个变量了；这个匿名函数的参数作用域和for参数的作用域不一样，是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性，是可以被内层方法使用的。

解决方案4：setTimeout第三个参数

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

　　由于每次传入的参数是从for循环里面取到的值，所以会依次输出0到5。
（转载自：www.cnblogs.com/wl0804/p/11…