for循环let和var在定时器中的变量泄露

最新推荐文章于 2022-04-23 15:33:27 发布

weixin_33895695

最新推荐文章于 2022-04-23 15:33:27 发布

阅读量687

点赞数 1

CC 4.0 BY-SA版权

文章标签：面试

原文链接：https://segmentfault.com/a/1190000017195310

本文解析了JavaScript中变量提升现象及定时器异步执行导致的常见错误，通过实例展示了如何利用立即执行函数和ES6 let关键字解决定时器打印错误结果的问题。

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

前几天面试遇到了一些问题，恰好今天偶然间看到了这个问题，决定记录一下

定时器中打印结果为5，考察知识点变量提升，同步和异步
解答：首先定时器为异步操作，需要等待函数体执行完毕才可以继续执行，也就是此时的0，1，2，3，4已经打印出来了，i=4时条件成立，i++,此时i=5,下一轮判断失败，结束循环
因为var 存在变量提升，相当于这样

所以最后的为5，定时器输出为5

然后我又想了想，如果定时器想要打印出0,1,2,3,4有几种实现方式
第一种：

上结果

采用立即执行表达式来模拟块级作用域，这样的作用是每次将i的值封存在这个匿名函数中，根据作用域返回的定时器会读取匿名函数传递的参数，而不会去读取相隔那么远的放在全局的值，这样就OK了

第二种 es6 let

原理呢和上面差不多，只是采用es6语法，就是let声明的变量只在它所在的代码块有效。而var命令声明的，在全局范围内都有效，全局只有一个变量i，for循环执行语句也相当于一个块级作用域。so，就是0，1，2，3，4

看一下let用babel降级到es5的样子,基本差不多

-----------------------------end------------------------------------------------

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33895695

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

var声明用来计数的循环变量泄漏为全局变量问题

The code world of freedom

04-29

2532

问题描述：遍历a标签依次输出该标签的序号,结果3次都输出的是3，预期是0，1，2

for循环里的定时器

weixin_40200679的博客

04-07

1117

在学习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。有人会说这个题目并不难，而且只要你遇到过这个题目，下次再见到基本也不会答错了，但其实这段简单的

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

JS变量泄露以及闭包问题

xxwyxlf的博客

02-06

465

复习js时记录一些关于es5变量泄露问题和闭包的总结关于es5中变量泄露的问题由于es5中js不存在块级作用域的概念，所以循环语句中i变量造成了变量泄漏例子： function fn() { var arr = new Array(); for (var i = 0; i < 5; i++) { ...

var和let遇到for循环

yijun9588的博客

04-08

768

for循环内部是一个块级作用域 JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域 for (var i = 0; i < 3; i++) { setTimeout(function() { // 同步注册回调函数到异步的宏任务队列。 console.log(i); // 执行此代码时，同步代码for循环已经执行完成 }, 0); }...

js内存泄漏详解

Zale的博客

11-09

548

JavaScript常见内存泄漏原因及其解决方式内存泄漏的定义本质上来说，即是那些无法被应用所使用但又没有被浏览器回收的内存。 JavaScript中的内存管理机制首先，JS是支持GC语言的，这类语言可以帮助程序猿们自动的管理内存，并且可以定期去检查内存的分配情况。在js中，无效的引用代码中本应释放的已经引用的内存却没有释放的变量，就会造成内存泄漏现象对于内存使用...

for循环里的定时器以及 var 和 let 的使用

weixin_51175311的博客

11-14

2276

一道for循环的经典题目 for(var i = 0; i < 5; i++) { setTimeout(function () { console.log(' i = ' + i); }); } console.log('a'); 打印出： 为什么会这样呢，其实这个问题并不难，基本遇到，下次基本就不会错了，但是这个简单的代码内包含很多的js知识点 ...

for循环中let的作用域问题

m0_46599532的博客

01-04

996

let中for循环的作用域问题今天在学习闭包的时候使用var声明的for循环

js代码-一个for循环例子带出来的问题. 常见面试题，涉及到同步异步执行，闭包，变量作用域等问题。

07-15

在for循环中，使用`var`声明的变量会提升到当前作用域的顶部，可能导致在循环体内不同迭代中产生意外的结果，而`let`则避免了这种问题，每次迭代都会创建一个新的变量实例。举个可能的面试题例子： ```javascript...

彻底理解var/let/const三者的区别

qq_35895679的博客

07-17

955

创建时的区别 ES3创建变量用的是 var ES6创建变量用的是 let / const var/let/const三者指针指向的区别 LET VS CONST =>突出的是指针指向以及等号赋值的底层机制 =等号赋值其实就是指针指向的过程：先创建值，再创建变量（引申：堆栈内存上以及AO/VO上 [点到为止]），最后指针关联；LET创建的是变量，是因为可以修改当前变量的指针指向，而CONST创建的变量，指针指向一但确定，则不能再更改（引申：平时也看一些好的文章，有的文章中介绍CONST创建的是常量

JavaScript经典面试题 —— 解决循环打印问题

火星基地

06-07

1315

循环输出问题是面试中经典的题目，一般会给出代码，让我们解释原因，并给出若干解决方案。 1. 题目分析以下代码运行后会打印什么？答案：6 6 6 6 6 for (var i = 1; i <= 5; i++) { setTimeout(function () { console.log(i); }, 0); } 虽然每个for循环中定时器设置的时间都是0，但由于JavaScript是单线程 eventLoop机制，setTimeout是异步任务，遇到set.

for 循环变量泄露为全局变量

qq_37612114的博客

03-07

1401

for(var i = 0; i &lt; 3; i++) { console.log(1); // 0 1 2 } console.log(i); // 3 函数外的变量和函数里的局部变量的冲突，外部的全局变量会被函数里的局部变量覆盖 var i = 0; if(i &lt; 3) { i++; console.log(i); // 1 if(i &lt; 3) { ...

for 循环中的定时器问题

qq_36941804的博客

11-30

6099

最近有个需求是要指定的内容每两秒依次出现，就在for循环中嵌套了定时器，果然刷新页面出问题了，一个元素都没有出来，于是就开始找原因了，终于发现有篇文章写得太好了！！！转载链接：https://www.cnblogs.com/hahazexia/p/9446585.html 我把原文粘贴复制过来了o(*￣︶￣*)o 在学习js的时候，或者面试的时候，会经常碰到这一道经典题目： for(v...

JS什么时候在for循环中用var会出问题

DanmoSAMA的博客~

02-04

1199

参考博客：阮一峰ES6教程 var 一直听说var声明变量，存在循环变量泄漏为全局变量问题，但总是想不明白这个“全局”有什么影响，还有，到底什么时候输出的结果是递增/减的值，什么时候输出一样的值，也不清楚。现在总结一下：正常情况 for(var i = 0; i < 10; i++){ console.log(i); } alert(i);//10 依次输出1~9，弹出10 问题情况此处借用阮一峰博客的代码： var a = []; for (var i = 0; i < 10; i+

变量泄露问题

qq_53066188的博客

04-23

529

经典的案例 let arr = [] for(var i =0;i<=5;i++){ arr[i]= function fn(){ console.log(i) } } arr[0]() //6 解析：我们的想法是arr[0]的函数应该是打印0的，而且每个元素的函数都能打印出自己的索引才对，可结果出乎意料。实际上为啥是6，我们先逐步分析。 1.js没有块级作用域 for(var i =0;i<=5;i++){ b=3 console.lo

JavaScript中 var、let、const 特性及区别详解

明天也要努力的博客

02-08

1032

1. ES5 中 var 声明变量的弊端 ES5 中其实给我们提供了两种声明变量的方法：var 命令和 function 命令。使用 function 命令声明函数这里不参与讨论，我们主要对比 var 命令。 var 命令声明变量有三大特点：变量可以重复声明；变量声明会被提升；没有块级作用域；这三个特点使得 JS 代码的编写显得有些“随意”，不够规范，而且这样的语法逻辑也有悖常理，举两个例子： 1.1 内层变量会覆盖外层同名变量我们用 var 声明一个全局变量 num 赋值为 1，之后在 s

ES6：let和const的使用及注意点

Mr.Starl

01-03

604

块级作用域在ES5中只有全局作用域和函数作用域，ES6中用let命令新增了块级作用域，使外层作用域无法访问到内层作用域，避免了变量泄漏为全局变量带来的麻烦，而且在块级作用域中不存在变量提升。一对大括号{}内的区域是块级作用域的作用范围，包括判断语句和循环语句中的大括号（如if语句和for循环）。另外，在块级作用域中可以声明函数，但应该避免这样做，因为会产生浏览器解析和语法规则不一致的情况（具...

js中分别使用var和let定义for循环中的变量，代码块加入定时器setTimeout后循环结果一致与不一致问题

puyaguo的博客

09-23

1178

（前提备注：不想看繁杂文字的同学请看图后直接看文章最后总结）使用for循环，在循环体中加入定时器setTimeout()后，为什么循环结果都一样？预期结果是0-9 原因：这里要了解js同步执行和异步执行机制规则：同步优先、异步靠边、回调垫底。　　　　用公式表达就是：同步 => 异步（定时器 or 异步请求） => 回调 1、js的执行机制： js是单线程环境，从...

layui使用templet格式化表格数据

最新发布

03-21

### JavaScript 中 `setTimeout` 和 `for` 循环的正确处理在 JavaScript 中，当尝试将 `setTimeout` 嵌套在一个 `for` 循环中时，可能会遇到变量作用域的问题。这是因为 JavaScript 的闭包机制以及异步回调函数的作用范围所致。 #### 问题分析在传统的 `for` 循环中，如果直接将循环计数器作为参数传递给 `setTimeout`，由于 JavaScript 是单线程运行模型，在每次迭代结束之前不会立即执行 `setTimeout` 定义的任务。因此，最终所有的定时器都会引用同一个变量值——即最后一次迭代后的值[^1]。以下是错误实现的例子： ```javascript for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000); } ``` 上述代码的结果将是连续五次打印数字 `5` 而不是期望中的从 `0` 到 `4` 的序列。 #### 解决方案一：使用 IIFE（立即调用函数表达式）通过创建一个新的作用域来捕获当前迭代的值，可以解决这个问题。IIFE 可以用来封装每一次循环的状态并将其固定下来。 ```javascript for (var i = 0; i < 5; i++) { (function(j) { setTimeout(function() { console.log(j); }, 1000); })(i); } ``` 这里 `(function(j){...})(i)` 创建了一个新的匿名函数，并立即将其调用传入当前索引值 `i` 给它的一个局部副本 `j`。这样就确保了每个延迟操作都拥有自己独立的一份数据拷贝[^2]。 #### 解决方案二：利用 ES6 的 `let` 关键字声明块级作用域变量 ES6 引入了 `let` 进行块级作用域定义，这使得我们可以更简洁地解决问题而无需额外构造函数或对象结构。 ```javascript for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000 * (i + 1)); } ``` 在这个版本里，因为 `let` 提供了每轮循环自己的绑定环境，所以即使不借助外部辅助手段也能达到预期效果[^3]。 #### 结合微任务队列理解行为值得注意的是，上面提到的方法还涉及到了宏任务(`setTimeout`)与微任务(Promise.then等)之间的交互关系。例如，在某些极端情况下(比如大量嵌套 promise)，可能需要考虑浏览器或者 Node.js 对于 microtasks 数量限制的影响[^4]。 --- ### 示例代码展示以下是一个综合运用以上技巧的实际案例演示: ```javascript // 使用 let 实现正确的顺序输出 for (let i = 0; i < 5; i++) { setTimeout(() => { console.log('Using Let:', i); }, 1000 * (i + 1)); // 设置不同时间间隔以便观察结果 } console.clear(); // 或者采用 IIFE 方法 for (var j = 0; j < 5; j++) { (function(k){ setTimeout(() => { console.log('Using IIFE:', k); }, 1000*(k+1)) })(j); } ``` 此脚本展示了两种不同的方式来保证按序显示数值而不是全部相同的最大值。 ---