for循环中嵌套setTimeout的问题

最新推荐文章于 2024-08-07 16:06:48 发布

原创最新推荐文章于 2024-08-07 16:06:48 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个具体的JavaScript代码示例，深入浅出地讲解了JavaScript引擎的单线程特性及异步执行机制，特别是setTimeout函数的工作原理，并给出了相应的解决办法。

题目：

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }， 100);
}

JavaScript引擎是单线程运行的,浏览器无论在什么时候都有且仅有一个线程在运行JavaScript程序。

编程过程中的setTimeout(类似的还有setInterval、Ajax)为异步执行。

理解过程：

当代码中没有任何同步代码的前提下才会执行异步代码，所以该题中setTimeout执行时for循环已经执行完，i已经变成了3，调用的两次setTimeout执行，故连续弹出两次3

解决办法：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Geeice

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

for循环嵌套带来的超长耗时

洲哥的博客

10-11

5853

1.场景描述我们在做增量库存同步的时候，有这样的逻辑： (1).从库存系统拿到指定时间到当前时间期间库存变动的货品编码; (2).从本系统的数据库和redis中拿到本店铺的货品编码[涉及到重复铺货]； (3).取出两者的交集，就是本店铺中这段时间有库存变动的货品编码集合； (4).用这个交集做入参查询对应的库存； (5).将这个变动的库存送到淘宝平台； 2.故障现象如果我们设定的时间距离当前...

微信小程序setTimeout实现循环倒计时(根据自己需求写的, 分享一下,有什么问题请指教)

青衫折扇的博客

10-27

969

我们先来看一下效果图,我不知道怎么弄动态的,也没时间研究,将就着看吧 wxml <view class="like-overall"> <view class="like-chunk back" wx:for="{{list}}" wx:key="index"> <view class="like-image-over" > <image class="like-img" src="{{item.

参与评论您还未登录，请先登录后发表或查看评论

for循环嵌套setTimeout执行顺序

weixin_57913339的博客

04-16

312

而使用let声明迭代变量时，JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变量实例，所以console.log输出的是我们期望的值，也就是循环执行过程中每个迭代变量的值。之所以会这样，是因为在退出循环时，迭代变量保存的是导致循环退出的值：5。在之后执行超时逻辑时，所有的i都是同一个变量，因而输出的都是同一个最终值。// 你可能以为会输出0、1、2、3、4。// 实际上会输出5、5、5、5、5。// 会输出0、1、2、3、4。

for中循环嵌套定时器

Zt0118的博客

11-09

462

for(var i=0;i<5;i++）{ setTimeout(() => { console.log(i); }, 1000 * i); } console.log('111'); 结果为：

【转】从settimeout说事件循环模型

weixin_30411239的博客

03-17

175

原文地址：http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout-said-the-event-loop-model/#prettyPhoto 作为一个从其他编程语言（C#/Java）转到Javascript的开发人员，在学习Javascript过程中，setTimeout()方法的运行原理是我遇...

for循环嵌套定时器（自用）

weixin_45038124的博客

02-28

2284

for循环嵌套定时器

nodejs中解决异步嵌套循环和循环嵌套异步的问题

10-19

然而，这种异步编程模型也带来了一些编程难题，特别是当异步操作嵌套在循环中时，即异步嵌套循环和循环嵌套异步的情况，很容易导致程序出现混乱和错误。为了解决这些问题，node.js社区推出了各种第三方模块，其中...

JSfor循环嵌套外层for循环只执行了一次

最新发布

03-18

### JavaScript嵌套for循环外层只运行一次的原因分析在JavaScript中，如果遇到嵌套`for`循环的场景下，外层循环似乎只执行了一次的情况，通常是由于内部逻辑中的某些条件或操作影响了外部循环的行为。以下是可能...

for循环嵌套set Timeout ，每次间隔5000s

07-15

如果你想在每次循环之间设置5000毫秒的延迟，可以使用嵌套的setTimeout函数来实现。以下是一个示例代码： ```javascript function delayedLoop(count) { for (let i = 0; i ; i++) { setTimeout(() => { console...

for函数里面setTimeout异步问题应注意什么

04-26

4. 如果在for循环中使用setTimeout时，需要通过一些方式来保证回调函数的执行顺序，例如使用Promise或者回调函数嵌套等方式来实现。总之，在使用for循环和setTimeout时，需要避免创建大量的定时器，同时需要注意回...

for 循环中嵌套定时器问题

周涛的博客

11-09

2936

for 循环中嵌套定时器问题在学习js的时候，或者面试的时候，会经常碰到这一道经典题目： for(var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }); } console.log('a'); 输出结果是： a 5 5 5 5 5 结果是先打印字符串’a’，然后再打印5个数字5。有人会说这个题目并不难，而且只要你遇到过这个题目，下次再见到基本也不会答错了，但其实这段简单的代码里面

for循环中的setTimeout的几种情况

weixin_46515434的博客

08-07

642

在这个代码片段中，setTimeout 的第一个参数是 console.log(i)，这是一个立即执行的函数调用，而不是一个回调函数。因此，console.log(i) 会立即执行，并且 setTimeout 的第二个参数 0 实际上没有任何意义，因为 console.log(i) 已经立即执行了。循环执行：for 循环从 i=0 开始，每次循环 i 递增 1，直到 i<10 不成立为止。回调函数执行：由于 let 具有块级作用域，每次循环都会创建一个新的 i，因此每个回调函数都会捕获到对应的 i 值。

在for循环中嵌套定时器问题

周涛的博客

11-09

414

在for循环中嵌套定时器问题 1、案例 for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i) }, 1000 * i) }//打印结果依次打印五个5 2、修整打印0，1，2，3，4依次打印使用es6 let for (let i = 0; i < 5; i++) { setTimeout(() => {

循环嵌套定时器问题

qq_25864811的博客

10-16

293

写完之后发现矩形一秒就完成的，没有实现我想要的效果，也就是没有增长的过程，开始找错误，看看怎么实现，发现for循环完成循环很快，几毫秒就完成了，所以当定时函数调用的时候已经是循环完的结果，所以考虑闭包。刚开始考虑先画出一个矩形用canvas画出一个矩形，再用循环嵌套定时器函数让矩形移动。for循环与定时器在一起怎么会这样？- 知乎 (zhihu.com)用canvas画一个方块，并且让他移动到给定的宽度边缘。（小白记录自己写代码的时候遇到的一些问题）修改完之后，正常运行，也有过度效果了。

for循环中嵌套settimeout，settimeout中重复执行for的最后一个值问题及解决办法

yorke520的博客

10-18

2532

最近在用前端直接上传图片到七牛时，发现官方demo中只演示了单图上传，因客户有多图上传的需求，就自己在官方demo的基础上加了点自己的想法：加入一个for循环，遍历获取到的图片文件数组，实现循环上传。但是遇到了重复上传同一张照片(选择几张照片重复几次)的问题。通过自己思考并请教前辈找到了问题所在：问题出在了for循环中有settimeout控制了一个上传的接口；先上一...

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

梦是太匆

10-11

1871

我们有时候会遇到在循环中调用setTimeout进行迭代的问题，如下所示。 for (var i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i) }, i * 1000) } 输出结果大家都只是会是5个6，由于JavaScript是单线程的，按顺序执行，setTimeout是...

JS中For循环中嵌套setTimeout()方法的执行顺序

Start -ZJ的博客

09-12

3742

今天突然想到了之前看过一个在For循环中执行setTimeOut()方法的代码，那时候对输出的结果不是很理解。今天就来详细的记录下。先贴一段简单的代码： function time() { for(var i= 0;i<5;i++){ setTimeout(function () { console.log(i...

循环延迟问题 for + setTimeout()

weixin_45773503的博客

11-08

595

假设我们要实现一个repeat函数，能够在间隔相同的时间去执行一个fn。（func，次数，间隔时间） function repeat(func, times, wait) { return (...arg) => { for (let i = 0; i < times; i++) { setTimeout(() => [ func(...arg) ], wait) } } } const repeatF = repea

for循环中setTimeout使用注意

qq_33571718的博客

11-15

1866

声明：本博文用于学习总结及工作心得使用Extjs前端框架时，需要改变框架中grid组件默认的样式；由于组件中嵌套有checkBox复选框，使用的是动态加载所以在使用listener 监听afterrender时做动态修改组件样式，总是获取不到checkbox组件；然后改用setTimeout延迟方法的执行；问题得以解决，但是如果该grid在当前哟多个时，通过样式选择器获取组