for循环中使用setTimeout的四种解决方案

发布时间:7个月前 来源:94开发网原创 作者:超级管理员 热度:148℃
解决方案1:闭包解决方案2:拆分结构解决方案3: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。

for循环中使用setTimeout的四种解决方案

解决方案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。

for循环中使用setTimeout的四种解决方案

解决方案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的四种解决方案的详细内容


文章链接:https://www.94kaifa.com/bc/10095.html

文章标题:for循环中使用setTimeout的四种解决方案

文章版权:94KAIFA(www.94kaifa.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

本文最后更新发布于 2023-09-05 10:40:38 ,某些文章具有时效性,若有错误或已失效,请联系客服处理:75109479@qq.com

关于我们
本站上线于2023年09月01日,专注PbootCMS模板制作及整合,提供优质的企业网站模板、建站技术教程、网页素材、网站源码下载,更有仿站开发、网站维护等业务。做中小站长企业快速建站好帮手。
站长QQ:532088631
微信群聊
微信群聊
联系方式
技术交流QQ群号201010290
电话:400-0707-327
邮箱:kefu@kaifacn.com
坐标:西安市雁塔区高新路6号
陕ICP备2020015383号 陕公网安备61019002001930号

Copyright © 2023 94KAIFA All Rights Reserved.本站采用创作共用版权 CC 4.0 BY-SA 许可协议