关于在for循环中使用setTimeout

setTimeout的运行机制：

先将回调函数放到等待队列中，等待区域内其他主程序执行完毕后，按时间顺序先进先出执行回调函数。本质上是作用域的问题。

在for循环中使用setTimeout时：

for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i ); //6 6 6 6 6 6
     }, i*1000 );
}

因setTimeout是异步执行，每一次for循环的时候，setTimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里等待执行。只有主线上的任务执行完，才会执行任务队列里的任务。

即它会等到for循环全部运行完毕后，才会执行fun函数，当for循环结束后此时i的值已经变成了6，因此虽然定时器跑了5秒，控制台上的内容依然是6。

另一种：

for (var i = 0; i < 5; i++) {
     (function() {
//       console.log(i);  //0 1 2 3 4 
//       console.log(i * 1000); //0 1000 2000 3000 4000
         setTimeout(function() { //在最后才执行，因为setTimeout是异步加载
           console.log(i);// 5 5 5 5 5
         }, i * 1000);
     })(i);
//   console.log(i);  //0 1 2 3 4
}
console.log(i)//5 **重点

由setTimeout的运行机制可以知道，首先会运行外部的所有主程序，虽然for循环内形成了闭包，但是fun并没有发现一个实参所以跟第一个例子并无实际差别，仍然是连续输出5个5。

解决方法：

1、使用闭包

 for (var i = 0; i < 5; i++) {
     (function(j) { 
         setTimeout(function() {
              console.log(j);// 0 1 2 3 4
         }, i * 1000);
      })(i);
//    console.log(i);  //0 1 2 3 4
 }

依次输出0到4，因为实际参数跟定时器内部的 i 有强依赖。

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

2、拆分结构

将setTimeout的的定义和调用放到不同的地方

function timer(i) {
    setTimeout( console.log( i ), i*1000 );// 1 2 3 4 5
}
for (var i=1; i<=5;i++) {
    timer(i);
}

 3、使用es6中的let

for(let i=1;i<=5;i++){
   setTimeout(functon(){
      console.log(i);  //1 2 3 4 5
   },i*1000) 
}

 因为for循环头部的let不仅将 i 绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值被重新赋值。

setTimeout里面的function()属于一个新的域，通过var定义的变量是无法传入到这个函数执行域中的，而使用let声明块变量能作用于这个块 =》function就能使用 i 这个变量了

这个匿名函数的参数作用域和for参数的作用域不一样，是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性，是可以被内层方法使用的。

4、setTimeout第三个参数

for(var i= 1;i<=5;i++){
  setTimeout(function(i){
      console.log(i); // 1 2 3 4 5
  }, i*1000, i )
}

由于每次传入的参数都是从for循环中取到的值，所以依次输出1-5。

这当然还是作用域的问题，但是在这里setTimeout第三个参数却把i的值给保存了下来。这种解决方法比使用闭包轻快的多。

扩展：

setTimeout(function(x){
  console.log(x)   // 1
},1000,1)

setTimeout(function(x,y){
  console.log(x+y)   // 3
},1000,1,2)

setTimeout的第三个参数起（可选参数）的作用就是第一个函数传参。但是使用第三个参数需要注意的一点就是对IE9及以前的版本不兼容。

 

转载来源：https://www.cnblogs.com/wl0804/p/11987833.html