js关于for循环里的setTimeout

最新推荐文章于 2023-08-24 11:50:49 发布
原创 最新推荐文章于 2023-08-24 11:50:49 发布 · 4.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#setTimeout #for循环 #web前端

本文探讨了JavaScript中setTimeout函数的一个常见误区，即在循环中使用时如何避免因变量作用域问题导致的输出错误。通过对比不同写法，揭示了闭包在异步编程中的微妙之处。 
<span style="font-family:SimHei;font-size:14px;"> <script type="text/javascript">
        for(var i=0;i<3;i++) {
            setTimeout(function () {
                console.log(i),100*i
            })
        }
    </script></span>


本以为上述代码会输出0,1,2，可是它就输出3个3，但是下面这样写，它就会输出3个3:

<span style="font-family:SimHei;font-size:14px;"><script type="text/javascript">
        for(var i=0;i<3;i++) {
            setTimeout(
                console.log(i),100+i
            )
        }</span>

    考虑了很长时间，才知道，for语句不会因为有setTimeout的存在而停止，他会跳过setTimeout，setTimeout设定的是100毫秒的延迟，而for语句执行根本用不了那么长时间，但是为什么把关键字function去掉就可以了，呵呵，我相信大家应该都有自己的想法了。

还是那个原则，我分享的东西不高大上，但是都是平时我们容易忽视，容易出错的地方，写出来与大家分享！

javascript中for循环和setTimeout同时使用，出现的问题
weixin_44493841的博客
08-17 375
javascript中for循环和setTimeout同时使用，出现的问题 for循环代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> for (var i = 0; i < 5; i++) {
js中setTimeout的妙用–防止循环超时
12-12
JavaScript中的`setTimeout`函数在处理耗时操作时有一个巧妙的应用，即防止循环超时，确保浏览器不会因长时间运行的任务而假死。这个概念主要源于JavaScript的单线程特性，即同一时间只能执行一个任务。当遇到如向...
js问题：for循环中的setTimeout（详解）
weixin_53141315的博客
08-24 1588
for循环中var声明的变量是全局变量，而let声明的变量是局部变量当在 for 循环中使用 let 声明变量时，每次循环迭代都会为变量创建一个新的内存空间。这是因为 let 声明具有块级作用域，每次循环迭代都会创建一个新的作用域。变量只在当前循环迭代的块内部可见，循环结束后，作用域和变量都会被释放。而var会共享一个变量。
在for循环中运行setTimeout的三种情况
热门推荐
没有感情的代码机器的博客
07-05 1万+
在for循环中运行setTimeout是前端开发很常见的一种模式。最近被考了一道相关的题目觉得很有意思也很容易犯错，于是记录下来当做学习笔记。 下面先来看一段代码： for(var i=0;i<10;i++){ setTimeout(console.log(i),0); } 看完这段代码思考一下结果输出是什么呢？ 是不是第一时间想到的是连续的10个10呢？啊哈哈这样就...
在for循环中运行setTimeout
weixin_44066534的博客
05-29 2107
对for循环中运行setTimeout的理解 先看一段代码 for (var i=0; i<10; i++) { setTimeout(console.log(i), i*1000 ); } 答案：0、1、2、3、4、5、6、7、8、9 再比较一段代码 for(var i=0;i<10;i++){ setTimeout(function(){ console.log(i); },i*1000); } 答案：10、1
for循环中使用setTimeout的解决方案
weixin_45291798的博客
02-01 1708
这是因为setTimeout是异步执行，每一次for循环的时候，setTimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里，等待执行。只有主线上的任务执行完，才会执行任务队列里的任务。也就是说它会等到for循环全部运行完毕后，才会执行fun函数，但是当for循环结束后此时i的值已经变成了6，因此虽然定时器跑了5秒，控制台上的内容依然是6。通过闭包，将i的变量驻留在内存中，当输出j时，引用的是外部函数的变量值i，i的值是根据循环来的，执行setTimeout时已经确定了里面的的输出了。
for循环与setTimeout
DaiDai的博客
03-04 2090
1.只有for循环时for (var i = 0; i < 5; i++) { console.log(i); } 运行结果为0,1,2,3,4 ,这是大家都知道的2.在for循环中添加setTimeoutfor (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); },i*1000);
for循环 + setTimeout 结合一些示例(前端面试题）
12-11
最近在翻看以前的老书《node.js开发指南》，恰好碰到 for 循环 + setTimeout 的经典例子，于是重新梳理了思路并记录下。 二、写在前面，setTimeout 和 setInterval 的执行机制 在日常编码中，你会发现，给 ...
for循环中setTimeout闭包
最新发布
12-16
在 JavaScript 中，for 循环里使用 setTimeout 会出现闭包问题。以如下代码为例： ```javascript for(var i = 0; i ; i++){ setTimeout(function(){ console.log(i) }, i * 1000); } ``` 这里的问题在于，`...
for循环中setTimeout的执行问题
weixin_44062046的博客
03-05 918
for循环中setTimeout以及let块级作用域
JS中在循环内实现休眠（for循环内setTimeout延时问题）
C_B_W_的博客
04-26 9229
问题描述： 想要用setTimeout实现这么一个功能：每隔一秒输出一个数字。我们的代码js代码大概是这样的： for(var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, 1000); }; 运行这段代码会发现，程序在1秒后输出了3个3。（不但没有每隔一秒输出，而且输出的数字还全都是3） 原因分析： 这跟js的阻塞机制有关。 js阻塞机制，跟js引擎的单线程处理方式有关，每个window一个js线程。所谓单
71、for循环中引用setTimeout问题
sunnnnh的博客
06-20 869
for(var i=0; i<4;i++){ setTimeout(function(){ console.log(i); },100) } // 打印结果：4 4 4 4
for 循环中使用 setTimeout 的问题
qq_38114464的博客
07-15 908
起初，以为每次循环，setTimeout放入到console.log(i)中的i的值是不一样的，但是，JavaScript引擎在开始执行任务队列中代码时，会在当前作用域中寻找变量i，但是当前作用域（也就是setTimeout中）并没有对i的定义。异步任务是指不进入主线程，而进入任务队列的任务，只有当主线程上的任务执行完毕后，才通知任务队列，任务队列中的任务才会进入主线程执行。因为按照上面写法，每隔setTimeout的定时器依次是1s，2s，3s，4s，5s。也是解决了i的作用域问题。...
setTimeout经典案例
白驹过隙
08-30 1863
在日常编码中，你会发现，给 setTimeout 和 setInterval 设定延迟时间往往并不准，或者干脆 setTimeout(function(){xxx},0) 也不是立马执行（特别是有耗时代码在前），这是因为 js 是单线程的，有一个事件队列机制，setTimeout 和 setInterval 的回调会到了延迟时间塞入事件队列中，排队执行。 setTimeout ：延时 d
for循环里面的方法用setTimeOut定时调用
Linda的前端开发路
01-03 2436
js中for循环里使用setTimeout方法实现每隔几秒调用方法
关于for循环中引用setTimeout
王小贱的博客
09-20 1万+
题目1： var a=[1,2,3]; var len=a.length; for(___){ setTimeout{function(){ console.log(__); },0} } 要求输出a的所有项。 该题目考察的就是JavaScript的单线程以及setTimeout的异步特性。 【注】：JavaScript引擎是单线程运行的，浏览器运
JavaScript的for循环中用setTimeout函数
weixin_44716147的博客
10-31 326
for(var i=1;i<=5;i++){ setTimeout(function(){ console.log(i); },i*1000); } //6 6 6 6 6 for( i=1;i<=5;i++){ setTimeout(function(){ console.log(i); },i*1000); } //6 6 6 6 6 for(let i=1;i<=5;i++){ setTimeout(func...
JS中For循环中嵌套setTimeout()方法的执行顺序
qq_35874340的博客
06-06 782
在For循环中执行setTimeOut()方法的代码，执行顺序是怎样的呢？ 代码如下 function time() { 　　for(var i= 0;i<5;i++){ 　　　　setTimeout(function () { 　　　　　　console.log(i); 　　　　},1000) 　　} } time(); 应该会有人会说，很简单呀，for循环进行遍历，并且每次有一个输出，那结果应该是0,1,2,3,4。 其实不然，运行上诉代码之后，控制台输出如下：5个
你不知道的三种在for循环中使用setTimeout的方法
qq_42535651的博客
11-18 2460
在 for 循环中使用 setTimeout 中可能会出现结果输出不符合预期： for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }); } 最后的输出结果： 5 5 5 5 5 原因是 var 变量不存在块级作用域，这5次循环中 setTimeout 使用的 i 其实都是一个 i，而setTimeout 异步执行会在 for 循环之后执行。 因此 setTimeout 获取的 i 都是最后执行完
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值