三种方法解决setTimeout的循环输出问题

梦里梦外; 2022-11-18 01:44 184阅读 0赞

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

**结果：**先打印5，一秒后打印5个5

**原因：**由于JavaScript是单线程的，按顺序执行，setTimeout是异步函数，它会将 内部函数放到任务队列中，而此时会先将循环执行完毕再执行 内部函数，因此当执行 内部函数时 i 已经等于5了，所以最终会输出5个5

### 方案一：使用let替换var ###

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

**输出**：先打印i is not defined，一秒后打印0-4（没有间隔）

**原理**：let块级作用域，for循环外无法获取i,因为for循环头部的let不仅将i绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。

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

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

### 方案二：使用闭包 ###

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

**输出**：先打印5，一秒后打印0-4（没有间隔）

**原理**：通过闭包，将i的变量驻留在内存中，当console时，引用的是外部匿名函数的变量值i，i的值是根据循环来的

### 方案三：使用settimeout的第三参数 ###

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

**输出**：先打印5，一秒后打印0-4（没有间隔）

**原理**：由于每次传入的参数是从for循环里面取到的值，所以会依次输出0-4

三种方法解决setTimeout的循环输出问题

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关三种方法解决区间问题

相关三种方法解决setTimeout的循环输出问题

相关服务器端解决跨域问题的三种方法

相关 java的三种循环

相关三种方法解决Josephus问题

相关 for循环中的setTimeout问题

相关 Oracle的游标使用方法三种循环遍历游标方法（即plsql三种循环方法）

相关三种循环的区别

相关在for循环中运行setTimeout的三种情况

相关三种方法解决苹果手机签名问题