＜script＞ for(var i=0；i＜10；i++){ setTimeout(function(){ alert(i)； },1000)； } ＜/script＞这个闭包为什么每次只打印10,

最新推荐文章于 2025-08-15 09:01:53 发布

左手喵子

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量220

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # JavaScript开发文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136095103

JavaScript开发专栏收录该内容

43 篇文章

订阅专栏

文章解释了JavaScript中for循环和setTimeout函数的交互，强调了当在for循环内部使用setTimeout时，由于异步特性，会创建10个独立的setTimeout函数，每个对应循环中的一个i值，而非在循环结束后统一执行。通过改用立即执行函数，解决了变量作用域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题代码

for(var i=0;i<10;i++){
			console.log(i)
				setTimeout(function(){
					console.log(i)
				},1000);
		}

setTimeout是一次执行函数，这里是1秒后执行，仅仅执行一次；for（var i=0;i<10;i++）,i的每次取值都是执行setTimeout这个函数，并没有执行setTimeout里面的function（即闭包函数）,setTimeout里面的function是有setTimeout的定时触动的，也就是1秒后执行，也就是说i从0~9时，一共执行了10次的setTimeout()函数，此时的i的值是10，由于for语句的执行速度远小于1秒，所以,1秒后，由setTimeout()函数定时触动的闭包函数function()开始执行，alert(i);i的值已经是10了，所以相继打印10次i.

修改代码

	for(var i=0;i<10;i++){	
			(function(i){
				setTimeout(function(){
					console.log(i)
				},1000);}
			)
		(i)}

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

左手喵子

关注关注

3
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

for (var i = 0； i＜ 10； i++){ setTimeout(() =＞ { console.log(i)； }, 10) }

hl_Abel的博客

08-28

4609

for(var i=0;i<10;i++){ setTimeout(function() { console.log(i) }, 10);} 答案：打印10次10 这道题涉及了异步、作用域、闭包 settimeout是异步执行，10ms后往任务队列里面添加一个任务，只有主线上的全部执行完，才会执行任务队列里的任务，当主线执行完成后，i是10，所以此时再去执行任务队列里的任务时，i全部是10了。对于打印4次是：每一次for循环的时候，settimeout都执行一次，但是里面的函数没有被执行，而是被

解决for循环里的setTimeout延迟i赋值的问题

suprise，motherfucker！

08-26

564

for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i); }, 100 * i); } setTimeout会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）。运行结果： 10 10 10 10 10 10 10 10 10 10 大多数人期望输出结果是这样： 0 1 2 3 4 5 6 7 8 9 setTimeout在若干毫秒后执行一个函数，并且是在for循环结束后。for循环结..

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

for(let i = 0; i < 10; i++)和for(var i = 0; i < 10; i++)的思考

chenqiwen2017的博客

08-21

2万+

let、 var、 setTimeout，一点思考。for(var i = 0; i < 10; i++){ setTimeout(function(){ console.log(i); },100); }结果是很显而易见的，10次都是10，在面试前端的闭包知识时候很常见。用上let之后，for(let i = 0; i < 10; i++){ setTi

for循环中let，var 的经典面试题：for循环中 console.log(i)详解

鹤汀凫渚的博客

10-23

8203

我猜你肯定不知道其中的真理

面试题27：在for循环中运行setTimeout问题（for(var i=0；i&lt；5；i++){ setTimeout(function(){ console.log(i)； },1000)）

qq_51066068的博客

05-06

4625

目录疑惑：重点讨论一下这个现象解决方法：一、利用setTimeout的第三个参数var ，将i作为参数传递给setTimeout 二、使用IIFE（立即执行的匿名函数）三、使用bind方法四、es6中的let声明的变量是具有块级作用域五：用立即执行函数也可以疑惑：重点讨论一下这个现象 for (var i=0; i<10; i++) { setTimeout(console.log(i), i*1000 ); } 答案：0、1、2.

JS循环打印问题

zerolea的博客

07-11

1184

i < 10;原因1.块级作用域：let声明的变量具有块级作用域。在 for 循环中，每次迭代都会创建一个新的块级作用域。这意味着每次循环都会创建一个新的i变量。2.闭包：每个 setTimeout 的回调函数都形成了一个闭包，它可以访问到创建它时的作用域中的变量。3.循环迭代中的行为：使用let时，JavaScript 引擎会在每次循环迭代中创建一个新的i变量。每个 setTimeout 的回调函数都会捕获到当时迭代中的i值。

【javascript】关于for语句中settimeout的代码理解

z767327552的专栏

03-10

746

for (var i = 0; i < 10; i++) { setTimeout(() => { console.log(i) }, i * 1000) }//打印输出10个10 为什么打印输出10个10？ javascript是单线程语言在浏览器中一个页面永远只有一个线程在执行js脚本代码（在不主动开启新线程的情况下）。 javascript...

判断for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10) }

dcfsdf43243的博客

08-12

3670

原文：https://www.jianshu.com/p/ecb71343964a 使用 var: 每一次for循环的时候，setTimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里面，等待执行， for循环了4次，就放了4次，当主线程执行完成后，才进入任务队列里面执行。使用 let： for循环头部的let不仅将i绑定到for循环块中，它...

for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i); },1000)

热门推荐

huakaiwuxing的博客

01-04

2万+

setTimeout是异步执行的，1000毫秒后向任务队列里添加一个任务，只有主线上的全部执行完才会执行任务队列里的任务，所以当主线程for循环执行完之后 i 的值为5，这个时候再去任务队列中执行任务，i全部为5；每次for循环的时候setTimeout都会执行，但是里面的function则不会执行被放入任务队列，因此放了5次；for循环的5次执行完之后不到1000毫秒；1000毫秒后全部执行任务...

for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}

weixin_30329623的博客

10-12

3642

for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);} 答案：打印4次4 这道题涉及了异步、作用域、闭包 settimeout是异步执行，10ms后往任务队列里面添加一个任务，只有主线上的全部执行完，才会执行任务队列里的任务，当主线执行完成后，i是4，所以此时再去执行任务队列里的任务时，...

在for循环中运行setTimeout

weixin_44066534的博客

05-29

2083

对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(var i=0；i＜=3；i++){ setTimeout(function() { console.log(i) }, 10)；}

weixin_37877794的博客

07-19

1791

https://www.jianshu.com/p/837f599a29e6 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/43

for 循环中setTimeout(function () { console.log(i)},100)中的异步问题

qq_42209630的博客

07-02

4005

for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); },100) }上述代码执行完后,打印3次3，这是setTimeout是异步执行的，会排在任务队列中，只有主线上的全部执行完，才会执行任务队列里的任务，当主线执行完...

在for循环中运行setTimeout的三种情况

没有感情的代码机器的博客

07-05

1万+

在for循环中运行setTimeout是前端开发很常见的一种模式。最近被考了一道相关的题目觉得很有意思也很容易犯错，于是记录下来当做学习笔记。下面先来看一段代码： for(var i=0;i<10;i++){ setTimeout(console.log(i),0); } 看完这段代码思考一下结果输出是什么呢？是不是第一时间想到的是连续的10个10呢？啊哈哈这样就...

面试：for循环+setTimeout函数

qq_42865575的博客

05-19

1373

文章目录问题情况1：情况2：情况3：解决1、使用let构建块级作用域2、使用闭包，构建块级作用域3、使用立即执行函数4、使用setTimeout第三个参数5、利用try/catch6、promise（待分析）问题输出的内容不是0、1、2、3、4、5、6、7、8、9 情况1： for(var i = 0; i < 10; i++) { setTimeout(() => { console.log(i); }, 1000); } //输出： 1s后连续输出10个1

electron进程间通信- 从渲染进程到主进程

唐璜Taro的博客

08-13

1109

本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。

Go语言实战案例:静态资源服务（CSS、JS、图片）

最新发布

tenkofx的博客

08-15

594

• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。

MoonBit Perals Vol.05: 函数式里的依赖注入：Reader Monad

m0_74743788的博客

08-13

1420

普通的函数就像一个流水线，你丢进去一袋面粉，然后直接跑到生产线末端，等着方便面出来。但这条流水线需要自动处理中间的所有复杂情况：没放面粉/“没有下单，期待发货”（null）面团含水量不够把压面机干卡了（抛出异常）配料机需要读取今天的生产配方，比如是红烧牛肉味还是香菇炖鸡味（读取外部配置）流水线末端的打包机需要记录今天打包了多少包（更新计数器）Monad 就是专门管理这条复杂流水线的“总控制系统”。它把你的数据和处理流程的上下文一起打包，确保整个流程能顺畅、安全地进行下去。

<html> <head> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script lang="javascript"> </script> </head> <body> <form> <div style="width:500px;margin:10px auto;text-align: center;"> <div style="font-size:28px;font-weight:bold;margin:0px auto;">user signup</div> <br /> <table style="width:100%;text-align: left;"> <tbody> <tr style="margin-bottom: 20px;"> <td> <span class="p">*</span> <label for="username" class="l"> new username:</label> </td> <td> <input id="username" type="text" style="height:30px;width:250px;padding-right:50px;"> </td> </tr> <tr> <td><br></td> <td></td> </tr> <tr style="margin-bottom: 20px;"> <td> <span class="p">*</span> <label for="password" class="l"> password:</label> </td> <td> <input id="password" type="text" style="height:30px;width:250px;padding-right:50px;"> </td> </tr> <tr> <td><br></td> <td></td> </tr> <tr style="margin-bottom: 20px;"> <td> <span class="p">*</span> <label for="passwordc" class="l"> repeated password:</label> </td> <td> <input id="passwordc" type="text" style="height:30px;width:250px;padding-right:50px;"> </td> </tr> <tr> <td><br></td> <td></td> </tr> <tr> <td> </td> <td> <input class="btn btn-success" type="button" style="margin:0 auto;width:250px;" value="click to signup" onclick='onSignup()' /> <label name='login_hint' id='login_hint' style='display:none'>sigup success!</label> </td> </tr> </tbody> </table> </div> </form> </body> <script lang="javascript"> function onSignup() { var username = document.getElementById('username'); var password = document.getElementById('password'); $.ajax({ url: "/user/signup", type: "POST", data: { "username": username.value, "password": password.value }, error: function (jqXHR, textStatus, errorThrown) { if (textStatus == "error") { alert(textStatus + " : " + errorThrown); } else { alert(textStatus); } }, success: function (data, textStatus, jqXHR) { if (data == 'SUCCESS') { // 成功后跳到登录页 document.getElementById("login_hint").style.display = "block"; setTimeout(() => { window.location.href = '/static/view/signin.html'; }, 2000); } else { alert('signup fail!'); } } }); } </script> </html> 换成https后还是出现错误

03-27

<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> ✔️ <link rel="stylesheet" href="https://cdn.jsdelivr.net/..."> ✔️ <script src="https://cdn.jsdelivr.net/..."></script> ✔...