首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

setTimeout里面的for循环

setTimeout 中使用循环时,需要注意 JavaScript 的事件循环机制。setTimeout 是异步的,这意味着它不会阻塞其他代码的执行。在 setTimeout 中使用循环时,可能会导致意外的结果。

例如,以下代码将会在 1 秒后输出数字 5 到 1,而不是按照预期的顺序输出数字 1 到 5。

代码语言:javascript
复制
for (var i = 5; i > 0; i--) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

这是因为 setTimeout 中的回调函数会在循环结束后执行,此时 i 的值已经变为 0。为了解决这个问题,可以使用立即执行函数表达式(IIFE)来创建一个新的作用域,以便在每次循环时捕获当前的 i 值。

代码语言:javascript
复制
for (var i = 5; i > 0; i--) {
  (function(currentI) {
    setTimeout(function() {
      console.log(currentI);
    }, 1000);
  })(i);
}

这样,每次循环时都会创建一个新的作用域,并将当前的 i 值传递给 IIFE。因此,当 setTimeout 中的回调函数执行时,它将能够访问正确的 i 值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【前端芝士树】for循环 + setTimeout

【前端芝士树】for循环 + setTimeout 还记得这张const、let、var比较的表格吗 是不是觉得没什么问题了?...来看看下面的程序: for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i); }) } // 5 5 5...事件循环从当前整体代码开始第一次事件循环,然后再执行队列中所有的微任务,当微任务执行完毕之后,事件循环再找到其中一个宏任务队列并执行其中的所有任务,然后再找到一个微任务队列并执行里面的所有任务,就这样一直循环下去...let 的作用域是块级的,所以每一次 for 循环,console.log(i); 都引用到 for 代码块作用域下的i,因为这样被引用,所以 for 循环结束后,这些作用域在 setTimeout 未执行前都不会被释放...参考文章 for循环 + setTimeout 结合的烂大街的面试题 彻底理解setTimeout() - 简书

23520
  • 六、setTimeout循环闭包经典面试题详解

    我在详细图解作用域链与闭包[1]一文中的结尾留下了一个关于setTimeout循环闭包的思考题。...利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5 for (var i = 1; i <= 5; i++) { setTimeout(function timer() {...可能不少同学对于setTimeout的理解止步于此,但还是有不少人发现了一些其他的东西,并在评论提出了疑问。比如上图中的这个数字7,是什么?...actions.'); 思考一下,当我将setTimeout的延迟时间设置为0时,上面的执行顺序会是什么?...如果我们直接这样写,根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点,for循环定义了5个setTimeout操作。

    1.2K10

    for循环的变量闭包

    2016-12-12 14:25:09 很多情况我们在for循环会给一个数组元素定义事件,例如下面代码 for (var i = 0; i < 10; i++) { setTimeout(function...() { console.log(i); }, 100 * i); } 介绍一下,setTimeout会在若干毫秒的延时后执行一个函数(等待其它代码执行完毕)。...让我们花点时间考虑在这个上下文的情况。 setTimeout在若干毫秒后执行一个函数,并且是在for循环结束后。 for循环结束后,i的值为10。 所以当函数被调用的时候,它会打印出 10!...current state of 'i' // by invoking a function with its current value (function(i) { setTimeout...参数 i会覆盖for循环的i,但是因为我们起了同样的名字,所以我们不用怎么改for循环的代码。

    1.2K20

    Power Query循环引用

    小勤:Power Query怎么也有“循环引用”? 大海:有互相引用的地方就可能有循环引用啊。你这里是不是在“公众号”的表里引用了“年龄”表里的数据,而“年龄”表里又引用了“公众表”的数据?...我想把公众号的内容再引用到年龄表里: 大海:这样当然会循环引用啊,因为你想啊,你引用整个公众号的表,而公众号又引用了年龄表里的数据,你说我刷新数据的时候,刷新年龄表,会引起公众号的数据刷新,而公众号表里的刷新又会引起年龄表里的刷新...,不就绕回来(循环)了吗?...比如我们明确在公众号调用当前人员的年龄表里的年龄,那可以直接添加自定义列来完成: 同样的,在年龄表里引用公众号表里的公众号内容,那也可以在年龄表里添加自定义列来完成: 小勤:这样不也是互相引用吗

    1.2K30

    JavaScript中Promise的代码为什么比setTimeout先执行?

    宏观和微观任务 JavaScript 引擎等待宿主环境分配宏观任务,在操作系统中,通常等待的行为都是一个事件循环,所以在 Node 术语中,也会把这个部分称为事件循环。...在底层的 C/C++ 代码中,这个事件循环是一个跑在独立线程中的循环,我们用伪代码来表示,大概是这样的: while(TRUE) { r = wait(); execute(r); }...我们可以看到,整个循环做的事情基本上就是反复“等待 - 执行”。...我们可以大概理解:宏观任务的队列就相当于事件循环。...结语 在今天的文章,我们学习了 JavaScript 执行部分的知识,首先我们学习了 JavaScript 的宏观任务和微观任务相关的知识。

    86720

    为什么不建议 for 循环 String ++?

    现在将过程分享给大家 测试用例 我们的代码在循环中拼接字符串一般有两种情况 第一种就是每次循环将对象中的几个字段拼接成一个新字段,再赋值给对象 第二种操作是在循环外创建一个字符串对象,每次循环向该字符串拼接新的内容...循环结束后得到拼接好的字符串 对于这两种情况,我创建了两个对照组 第一组: 在每次 For 循环中拼接字符串,即拼即用、用完即毁。...分别使用 String 和 StringBuilder 拼接 /** * 循环内 String 拼接字符串,一次循环后销毁 */ public static void...,循环结束后使用字符串,使用后由垃圾回收器回收。...分析用例3:虽然编译器会对 String 拼接做优化,但是它每次在循环内创建 StringBuilder 对象,在循环内销毁。下次循环他有创建。

    98910

    JavaScript执行(一):Promise的代码为什么比setTimeout先执行?

    宏观和微观任务 JavaScript 引擎等待宿主环境分配宏观任务,在操作系统中,通常等待的行为都是一个事件循环,所以在 Node 术语中,也会把这个部分称为事件循环。...在底层的 C/C++ 代码中,这个事件循环是一个跑在独立线程中的循环,我们用伪代码来表示,大概是这样的: while(TRUE) { r = wait(); execute(r); }...我们可以看到,整个循环做的事情基本上就是反复“等待 - 执行”。...我们可以大概理解:宏观任务的队列就相当于事件循环。...结语 在今天的文章,我们学习了 JavaScript 执行部分的知识,首先我们学习了 JavaScript 的宏观任务和微观任务相关的知识。

    59310

    图例详解那道setTimeout循环闭包的经典面试题

    可能不少人对于setTimeout的理解止步于此,但还是有不少人发现了一些其他的东西,并在评论提出了疑问。比如上图中的这个数字7,是什么?...接下来,我们还需要考虑另外一个重要的问题,那就是setTimeout中定义的操作,在什么时候执行?为了引起大家的重视,我们来看看下面的例子。...这里的延迟时间,并非相对于setTimeout执行这一刻,而是相对于其他代码执行完毕这一刻。所以上面的例子执行结果就非常容易理解了。 为了帮助大家理解,再来一个结合变量提升的更加复杂的例子。...OK,关于setTimeout就暂时先介绍到这里,我们回过头来看看那个循环闭包的思考题。...如果我们直接这样写,根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点,for循环定义了5个setTimeout操作。而当这些操作开始执行时,for循环的i值,已经先一步变成了6。

    20220

    JavaScript定时器:setTimeout与setInterval 定时器与异步循环数组

    02/21/2921354.html JavaScript——创建运动框架 提到定时器,就不得不先介绍一个JavaScript运行机制--》浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为...而UI线程的阻塞很多时候是由于我们要在代码进行长时间的脚本运算,超过了浏览器限 制,导致浏览器失去响应,冻结用户界面。..., 这样的问题是 在执行完成之前我们是没有办法控制页面的,数据越庞大越明显 使用定时器分解任务 使用定时器分解任务有两个前提 1、数据的处理不需要按照特定的顺序 2、是否必须同步处理,如果必须同步处理那么定时器不适用...异步循环 name为需要循环的array对象 id为要执行的解析函数 time设置每次运行的时间 if(time==undefined){time=30;};...,在处理不需要同步,不需要顺序执行的任务时,可以考虑使用setTimeout代替for循环 异步处理任务;

    2.2K60

    微信小程序for循环条件判断

    code:product.code, } let productLength = this.data.productIist.length; //如果列表没有直接推,如果有循环...code:product.code, } let productLength = this.data.productIist.length; //如果列表没有直接推,如果有循环...productIist: this.data.productIist }) }else{ // 原来思路:把数组中的每一项code取出来与扫码得到的code进行对比,如果不相等就push到数组中 从而在页面循环...=> { console.log(res) wzy.showPop('提示', '当前网络繁忙,请重新扫描') }) }, 所以 在上面的正确的示例中...使用for循环 并把判断也写进for循环中 如果数组中的code与扫描的code相等 就会弹出提示框,并且不会执行下面代码,但是当条件不相符的时候,便可以愉快的执行下面的代码了。

    3.7K50

    如何打开win10面的ubuntu系统

    这估计是很多极客弃离windows,选择使用mac或者linux桌面的原因。但mac贵,所以没有钱又不堪windows流氓软件烦扰的穷极客(比如一番)便热衷使用ubuntu桌面系统。...因为大多数朋友使用的都是windows系统,想要使用这个工具只能重新安装ubuntu系统或者在vmware、vbox安装虚拟机来运行程序。...开启“适用于Linux的Windows子系统” 如下图,依次点击:开始(windows)→设置→应用和功能→程序和功能→启用或关闭Windows功能→适用于Linux的Windows子系统,选中前面的选择框既可...开启“开发人员模式” 如下图,依次点击:开始(windows)→设置→更新和安全→开发者选项→开发人员模式,点击前面的单选框即可。 ? 3....在win10运行ubuntu系统 安装成功后便可在开始菜单向打开一个应用一样打开ubuntu的运行环境。我们便有了一个windows下运行ubuntu的环境了。

    7.4K20

    为什么不建议在 for 循环捕捉异常?

    相关的代码段我们都是放在一起的,如果此时你的程序中有大量的代码段要做这做判断,这就意味着后面执行的逻辑会依赖你前面语句的执行情况,也就意味着你每调用一个可能会出现错误的函数的时候,都要先判断是否成功,然后再继续执行后面的语句...为什么捕获异常消耗性能 其实从上面的分析中,我们就已经可以理解为什么捕获异常是一个消耗性能的操作了,当你 new 一个 exception 的时候,JVM 已经在 exception 构建好了所有的...for 循环和异常有两种结合方式: try+for 循环 public static void tryFor() { int j = 3; try { for (int...最后 本文从异常出发,分析了单独捕获异常和将异常与 for 循环结合的几种不同的情况,然后通过 JMH 进行了一次测试,最终验证我们标题所说的,不建议在 for 循环捕捉异常。...当然,try…catch 对性能的影响除了第二节所提到的需要维护一个异常表之外,还有一个原因,那就是 try 块会阻止 java 的优化(例如重排序),try catch 里面的代码是不会被编译器优化重排的

    2.2K10

    《猫和老鼠》的魔术艺术(二)——循环的艺术逻辑

    相关回顾请戳: 《猫和老鼠》的魔术艺术(一)——经典的印记 今天我们通过一个选集来看一下在整个动画中,放之四海而皆准,用到极致的情节结构——循环,以及其在魔术这个平行的艺术世界的应用。...这个在逻辑上我们叫做循环或者递归;在文学作品我们叫做同而不犯,或者反复;而在影视作品中间,这种手法也是去创造一个递进的情节,吊起观众胃口的重要手段。...接下来我们看看具体情节体现的循环逻辑下的艺术设计。 情节设计赏析 对比展现 铺垫完Tom拿到书的背景以后,1:00~30这场最开始的捕鼠器方法抓Jerry的戏,从逻辑上看,就极其的不合理。...让观众在后面的场景仅仅通过对称,循环等方式,自动去推导和套用前面说明过的逻辑,使得短暂时间内建立其更多的交互信息,能够传递更多的内容。...本期总结 还记得本篇的标题吧,循环是计算机的逻辑基本结构,在魔术很常见,而同而不犯和反复是文学作品对相似情节的不断重现,说的是一个意思,是同一个概念在不同空间的实例。

    68130
    领券