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

for循环中的setTimeout不会打印连续值

在JavaScript中,for循环中的setTimeout函数不会按预期打印连续值,因为setTimeout是异步的,它会在指定的时间后执行,但不会等待前一个setTimeout完成。这会导致所有的setTimeout函数同时执行,并且在循环结束后才会打印值。

为了解决这个问题,可以使用setTimeout的嵌套方式来实现连续打印值,或者使用async/awaitPromise来实现。

以下是使用setTimeout嵌套的方式:

代码语言:javascript
复制
function printValues(i, n) {
  if (i > n) {
    return;
  }
  setTimeout(function() {
    console.log(i);
    printValues(i + 1, n);
  }, 1000);
}
printValues(1, 5);

以下是使用async/awaitPromise的方式:

代码语言:javascript
复制
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function printValues(n) {
  for (let i = 1; i <= n; i++) {
    await delay(1000);
    console.log(i);
  }
}
printValues(5);

这两种方式都可以实现在for循环中使用setTimeout按预期打印连续值。

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

相关·内容

环中异步&&循环中闭包

作用域就是本次循环,下一次循环重新定义变量index;所以index每次循环输出都不同 这里还有另外一个问题,setTimeout,这是一个异步,这就是我们今天要讨论环中异步 setTimeout...一个需求,一个数组array[1,2,3,4,5],循环打印,间隔1秒 上面的let是循环打印了12345,但是不是间隔1s打印,是在foo函数执行1s后,同时打印 方式一 放弃for循环,使用setInterval...,结果是相同 总结 for循环本身是同步执行,当在for循环中遇到了异步逻辑,异步就会进入异步队列,当for循环执行结束后,才会执行异步队列 当异步函数依赖于for循环中索引时(一定是存在依赖关系...,不然不会再循环中调动异步函数)要考虑作用域问题, 在ES6中使用let是最佳选择, 当使用var时,可以考虑再引入一个索引来替代for循环中索引,新索引逻辑要在异步中处理 也可以使用闭包,模拟实现...let 在实际开发过程中,循环调用异步函数,比demo要复杂,可能还会出现if和else判断等逻辑,具体我们下次再续 参考 通过for循环每隔两秒按顺序打印出arr中数字 setTimeOut和闭包

1.6K20

关于JavaScript计时器知识学习

这样,该函数可以根据我们传递给它任何延迟打印不同消息。 然后我在两个 setTimeout 调用中使用了 theOneFunc ,一个在 4 秒后触发,另一个在 8 秒后触发。...虽然您可以将 setTimeout 放在循环中,但定时器 API 也提供了 setInterval 函数,这将完成永远执行某些操作要求。...当我们通过 node命令去执行 example4.js,Node 将不会打印任何信息并且退出进程。 顺便说一句,在 Node.js 中,还有另一种方法可以使用 0 ms 进行 setTimeout 。...这是一个简单 setTimeout 调用,应该在半秒后触发,但它不会: // example5.js setTimeout(() => console.log("Hello after 0.5...定时器挑战#3 编写脚本以连续打印具有不同延迟消息“Hello World”。以 1 秒延迟开始,然后每次将延迟增加 1 秒。第二次将延迟 2 秒。第三次将延迟 3 秒,依此类推。

1.6K40
  • 异步,同步,阻塞,非阻塞程序实现

    如果是同步,线程会等待接受函数返回(或者轮函数结果,直到查出它返回状态和返回)。如果是异步,线程不需要做任何处理,在函数执行完毕后会推送通知或者调用回调函数。...yzh start # 等待1s 打印 yzh is over 打印 zhh start # 等待1s 打印 zhh is over 阻塞后果 上面的代码,如果调用次数很多,则最后一个人要等待之前所有的人阻塞结束...它能让响应神奇变成: 打印 yzh start 打印 zhh start # 等待1s左右 打印 yzh is over 打印 zhh is over 这个异步sleep函数,似乎在单进程下,让每个函数互相不影响...上面的代码中,在一个while循环中timer状态。由于timer存在于wait中。所以需要把timer“提取”出来。...由于my_sleep在新线程中执行,所以它不会阻塞住主线程。 在my_sleep结束时,调用回调函数。使得任务继续进行。 也就是说,在每个要处理阻塞地方,都人为把函数切成三个部分: 1.

    7.6K10

    C语言中循环语句总结

    while坏:  for循环:  while和for循环对比: 区别:for 和 while 在实现循环过程中都有初始化、判断、调整这三个部分,但是 for 循环三个部 分⾮常集中,便于代码维护...答: 这是因为在这段代码中使用了 do-while 循环,循环条件是 n 不为 0。...即使 n 初始为 0,循环体内代码仍然会执行一次,然后才会检查循环条件。因此,即使 n 初始为 0,cnt 也会至少增加一次,最终输出 1。...环中 continue 后代码,直接去到循环调整部分。...,来到了i++调整部分 printf("%d ", i); } return 0; } 运行结果: 对比for循环和while循环中continue对代码运行影响: 分析代码可以知道它们修改条件位置不同

    12710

    如何在 JS 循环中正确使用 async 与 await

    阅读本文大约需要 9 分钟 async 与 await 使用方式相对简单。 当你尝试在循环中使用await时,事情就会变得复杂一些。 在本文中,分享一些在如果循环中使用await值得注意问题。...} console.log('End') } 在for循环中,过上使用getNumFruit来获取每个水果数量,并将数量打印到控制台。...如果你愿意,可以在promise 中处理返回,解析后将是返回。 const mapLoop = _ => { // ......不会以相同方式工作。...从上面看出来什么 如果你想连续执行await调用,请使用for循环(或任何没有回调循环)。 永远不要和forEach一起使用await,而是使用for循环(或任何没有回调循环)。

    4.4K30

    负载均衡调度算法大全

    基于这个前提,轮调度是一个简单而有效分配请求方式。然而对于服务器不同情况,选择这种方式就意味着能力比较弱服务器也会在下一轮循环中接受轮,即使这个服务器已经不能再处理当前这个请求了。...这意味着在服务器B接收到第一个请求之前前,服务器A会连续接受到2个请求,以此类推。...这是因为,如果所有的服务器是相同,那么第一个服务器优先,直到第一台服务器有连续活跃流量,否则总是会优先选择第一台服务器。...这为服务器提供了一个‘过渡时间’以保证这个服务器不会因为刚启动后因为分配连接数过多而超载。这个在L7配置界面设置。...所有服务器在虚拟服务上响应时间总和加在一起,通过这个来计算单个服务物理服务器权重;这个权重大约每15秒计算一次。

    6.3K30

    js 闭包

    ---- 这是我参与11月更文挑战第25天,活动详情查看:2021最后一次更文挑战 闭包三个特性 函数内嵌套函数 函数内部可以引用函数外部参数和变量 参数和变量不会被垃圾回收机制回收...函数作为返回 function a(){ var name = 'dev'; return function(){    //是一个匿名函数  函数运行都是由内部向外部 return...等到setTimeout可以执行时候,for循环已经结束,i也已经编程了。...坏每一次执行都是将赋值给全局变量 for(var i =0;i<5;i++){ } console.log(i);    // 5 let是块级作用域,只能在代码块内起作用。...接着30作为参数传入fn1中,这时if(x>num)中num取并不是立即执行函数中num,而是创建函数作用域中num 15。 30>15 ,打印15

    2.2K20

    常见负载均衡策略「建议收藏」

    基于这个前提,轮调度是一个简单而有效分配请求方式。然而对于服务器不同情况,选择这种方式就意味着能力比较弱服务器也会在下一轮循环中接受轮,即使这个服务器已经不能再处理当前这个请求了。...加权轮 Weighted Round Robin: 这种算法解决了简单轮调度算法缺点:传入请求按顺序被分配到集群中服务器,但是会考虑提前为每台服务器分配权重。...这意味着在服务器 B 接收到第一个请求之前,服务器 A 会连续接收到 2 个请求,以此类推。...这是因为,如果所有的服务器是相同,那么 第一个服务器优先,直到第一台服务器有连续活跃流量,否则总是会优先选择第一台服务器。...这为服务器提供了一个‘过渡时间’以保证这个服务器不会因为刚启动后因为分配连接数过多而超载。这个在 L7 配置界面设置。

    6.8K30

    JavaScript EventLoop

    EventLoop 即事件循环机制,是指浏览器或 Node 一种解决 JavaScript 单线程运行时不会阻塞一种机制,也就是我们经常使用异步原理。...主线程不断重复上面的第三步 一个事件循环中有一个或者是多个任务队列 总结:调用栈中同步任务都执行完毕,栈内被清空了,就代表主线程空闲了。...将事件循环中任务设置为当前选择任务 执行任务 将事件循环中当前运行任务设置为 null 将已经运行完成任务从任务队列中删除 Microtasks 检查步骤,进入微任务检查点。...此时检查微任务队列继续不为空 执行 promise1.then 打印 promise2 最后执行宏任务队列中任务 执行 setTimeout,延迟时间到后,将其回调函数放入任务队列中。...依次执行回调函数 打印 setTimeout3 打印 setTimeout4 打印 promise2-setTimeout 打印 setTimeout2 打印 Promise-setTimeout 打印

    17500

    JavaScript Event Loop

    事件循环是通过任务队列机制进行协调。一个事件循环中,可以有一个或多个任务队列,而每个任务都有一个任务源。 来自同一个任务源任务任务必须放到同一个任务队列,不同源则被添加到不同任务队列。...("hide"); } play(); 运行后页面并不会卡死,这是因为 setTimeout 属于宏任务中函数,宏任务每次执行一个,执行完毕后执行性后续页面渲染。...要想实现一个动画,可以利用 setTimeout,但是定时器动画一直存在两个问题,第一个就是动画时间环间隔不好确定;第二个问题是定时器第二个时间参数只是指定了多久后将动画任务添加到浏览器 UI 线程队列中...requestAnimationFrame 回调函数在屏幕每一次刷新间隔中只被执行一次,这样就不会引起丢帧,动画也就不会卡顿。...而如果 setTimeout 第二个参数有比较大时(>= 10ms),requestAnimationFrame 一般会先执行。

    1.3K20

    如何使用 RxJS 更优雅地进行定时请求

    在用 Angular 做项目的时候,遇到了一个有点麻烦问题。具体问题如下: 轮请求某个接口,如何保证接口返回数据与请求顺序相同?...实际业务场景是这样:前端需要轮请求后端接口获取文件处理进度,并在前端用进度条展示。如下方所示: ? 首先想到肯定是使用 setTimeout 或者 setInterval 进行定时请求。...我在之前工作中还没有遇到过这类需求,所以我并不是很清楚如果用传统方式应该如何解决。然而很庆幸是 RxJS 正好擅长处理这样问题。...,在规定调度程序中,以规定时间间隔发出连续数值。...interval 返回一个可观察对象,它可以周期性发出递增数值,但是第一次发出是在第一个周期结束之后执行

    2.2K40

    【入门级】从一道面试题了解js作用域及作用域链

    举个栗子,我们国家颁布《刑法》,那么刑法就相当于一个变量,存储,就是刑法内容,生效范围就是作用域,也就是全国。...text1时候会先在最近bar作用域中查找,如果可以找到就不会再往外找了,打印text时候先在最近bar作用域中查找,没找到就往foo作用域查找,还没找到,就往全局作用域查找,找到之后进行输出。...) } 打印结果:0 1 2 3 4 5 完全符合我们预期,这里我们使用是let,let声明变量支持块作用域,也就是仅在当前作用域内有效,所以这里我们循环中每一个setTimeout引用index...(i) }) })(i) } 这时候会打印什么呢,答案是5个 undefined,我最开始也有点懵,为什么呢,但仔细一看其实很简单,因为setTimeout里面那个未命名函数也有自己作用域...,它接收一个参数i,其实就是在自己作用域里定义了一个空变量i,所以打印时候在当前作用域里可以找到变量i,它就不会再继续往外找了,又因为找到变量i是空,所以会是undefined。

    41710

    从一个超时程序设计聊聊定时器方方面面

    但是,超时定时器执行同样受到JS是单线程限制,即使轮询代码是一样,但不能保证其它地方在本次循环中没有新增代码,所以使用setTimeout模拟间隔定时器,仍然不能保证相待间隔时间。...5,setTimeout(fn, 0) 因为setImmediate未被广泛实现,所以这种方法在单次延时执行场景中便成了最佳选择。通过将超时时间设置为0,fn将在下一代循环中被执行。...,虽然在它之前一个间隔为1秒定时器已经被注册了,但在它执行过程中,定时器不会触发(JS是单线程);并且在它之后,也不会输出3个2。...如果要求在每隔一个固定时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰问题,尤其是每次函数调用需要繁重计算以及很长处理时间,那么最好使用setTimeout...setTimeout和setInterval返回整数值是连续,也就是说,第二个setTimeout方法返回整数值,将比第一个整数值大1。利用这个特性,可以设计出一个定时器批量回收函数。

    1.4K20

    「Nodejs进阶」一文吃透异步IO和事件循环

    比如如上 callback ,作为一个异步回调函数,就像 setTimeout(fn) fn 一样,不会阻塞代码执行。...为了验证这个结论,例举一个打印结果题目如下: /* TODO: 打印顺序 */ setTimeout(()=>{ console.log('setTimeout 执行') },0) const...效果: 7.jpg 打印结果:Promise执行 -> 代码执行完毕 -> nextTick 执行 -> Promise 回调执行 -> setTimeout 执行 解释:很好理解为什么这么打印,在主代码事件循环中...,0) 打印结果: 5.jpg nextTick 队列是在事件循环每一阶段结束执行,两个延时器阀值都是 0 ,如果在 timer 阶段一次性执行完,过期任务的话,那么打印 setTimeout1...实际打印结果 14.jpg 从以上打印结果上看, setTimeout 和 setImmediate 执行时机是不确定,为什么会造成这种情况,上文中讲到即使 setTimeout 第二个参数为 0,

    2.1K20

    让你写出更加优秀代码!

    , 返回验证注解约束提供方按注解要求返回参数。...-勋 不要在循环中调用服务,不要在循环中做数据库等跨网络操作; 频-品 写每一个方法时都要知道这个方法调用频率,一天多少,一分多少,一秒多少,峰值可能达到多少,调用频率高一定要考虑性能指标,考虑是否会打垮数据库...日-日 打印日志和设定合理日志级别,如有必要要添加if条件限定是否打印日志,在日志中使用JSON序列化,生成长字符串toString()都要做if限定打印,否则配置日志级别没达到,也会做大量字符串拼接...另外一定要通过log4j打印日志而不是直接把日志打印到控制台。 典型错误示例: ?...做法2好处是将不同类型逻辑解耦,各自发展,不会相互影响,如果添加类型也不必影响现有类型逻辑。

    5.4K20

    阿里一面:熟悉事件循环?那谈谈为什么会分为宏任务和微任务。

    JS做任务分为同步和异步两种,所谓 "异步",简单说就是一个任务不是连续完成,先执行第一段,等做好了准备,再回过头执行第二段,第二段也被叫做回调;同步则是连贯完成。...这种设计是为了给紧急任务一个插队机会,否则新入队任务永远被放在队尾。区分了微任务和宏任务后,本轮循环中微任务实际上就是在插队,这样微任务中所做状态修改,在下一轮事件循环中也能得到同步。...,才能轮到微任务:第四个回调函数,微任务2在两个setTimeout完成后才打印。...都有更高优先级,即使它后进入微任务队列,也会先打印微任务nextTick再微任务promise1; 宏任务setTimeout比setImmediate优先级更高,宏任务2(setImmediate)是三个宏任务中最后打印...; 在node11.x之前,微任务队列要等当前优先级所有宏任务先执行完,在两个setTimeout之后才打印微任务promise2;在node11.x之后,微任务队列只用等当前这一个宏任务先执行完。

    71410
    领券