如何实现JS中for循环内setTimeout的四种高效解决方案？

本文共计1048个文字，预计阅读时间需要5分钟。

目录概述解决方案1：闭包解决方案2：解决方案2解决方案3：结构解决方案4：let解决方案4：setTimeout的第三个参数概述：我们先简单了解一下setTimeout延时器的工作机制。setTimeout会将回调函数放入任务队列，等待指定的延时后执行。

解决方案1：闭包闭包可以让我们访问外部函数作用域中的变量，即使外部函数已经执行完毕。

解决方案2：解决方案2（此处省略具体内容）

解决方案3：结构将复杂的结构成更小的部分，可以简化代码，提高可读性。

解决方案4：let使用let关键字声明变量，可以更好地控制变量的作用域，避免变量提升问题。

解决方案4：setTimeout的第三个参数setTimeout的第三个参数用于指定回调函数执行的延迟时间。

目录

• 概述
• 解决方案1：闭包
• 解决方案2：拆分结构
• 解决方案3：let
• 解决方案4：setTimeout第三个参数

概述

我们先来简单了解一下setTimeout延时器的运行机制。setTimeout会先将回调函数放到等待队列中，等待区域内其他主程序执行完毕后，按时间顺序先进先出执行回调函数。本质上是作用域的问题。

因此若是这样将不会得到想要的结果输出1.2.3.4.5，而会连续输出5个6。

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

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

（注意：for循环从开始到结束的过程，需要维持几微秒或几毫秒，当定时器跑完一秒之后for循环早已经做完了。）

我们来看另一种情况：

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

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

解决方案1：闭包

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

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

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

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

解决方案2：拆分结构

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

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

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

解决方案3：let

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

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

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

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

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

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

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

以上就是JS关于for循环中使用setTimeout的四种解决方案的详细内容，更多关于JS使用setTimeout的资料请关注自由互联其它相关文章！