JavaScript篇：setTimeout遇上for循环：为什么总是输出5？如何正确输出0-4？

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个经常和异步代码"斗智斗勇"的前端工程师。今天咱们来聊聊一个经典的面试题，也是很多新手容易踩坑的问题------在for循环中使用setTimeout。先看这段代码：

javascript 复制代码

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

你以为它会输出0,1,2,3,4？太天真了！实际输出是五个5！这是为什么？又该如何解决？且听我慢慢道来~

一、为什么会这样？------作用域与闭包的"陷阱"

这个现象背后隐藏着JavaScript的两个重要特性：

var没有块级作用域：在for循环中用var声明的i实际上是函数作用域（或全局作用域）的
异步执行：setTimeout的回调函数会在循环结束后才执行

具体执行过程是这样的：

for循环瞬间执行完毕（同步代码），i从0增加到5（当i=5时循环停止）
1秒后，5个setTimeout回调开始执行
此时它们访问的都是同一个i，而i的值已经是5了
所以输出了5个5

二、解决方案1：使用IIFE创建闭包

javascript 复制代码

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

原理：

立即执行函数(IIFE)为每次循环创建一个新作用域
把当前的i值作为参数j传入并"冻结"住
每个setTimeout回调访问的都是自己闭包中的j

三、解决方案2：使用let块级作用域（ES6推荐）

javascript 复制代码

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

这是最优雅的解决方案！

let有块级作用域，每次循环都会创建一个新的i
相当于自动为我们创建了闭包
代码简洁直观，没有魔法

四、解决方案3：利用setTimeout的第三个参数

javascript 复制代码

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

小技巧：

setTimeout可以接受多个参数，第三个及以后的参数会作为回调函数的参数
相当于浏览器帮我们做了参数绑定

五、解决方案4：用bind提前绑定参数

javascript 复制代码

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

原理：

Function.prototype.bind可以提前绑定参数
第一个参数是this（这里不需要所以传null）
后续参数会作为绑定函数的参数

六、深入理解：为什么let能解决问题？

let在for循环中的行为很特殊：

每次迭代都会创建一个新的词法环境（可以理解为新的作用域）
新的i会在这个环境中初始化，值为上一次迭代结束时的值
相当于自动为我们创建了闭包

可以近似理解为：

javascript 复制代码

// 伪代码，帮助理解let的行为
{
  let i = 0;
  setTimeout(function() { console.log(i); }, 1000);
}
{
  let i = 1;
  setTimeout(function() { console.log(i); }, 1000);
}
// ...以此类推

七、实际开发中的建议

默认使用let/const：告别var，拥抱块级作用域
注意异步代码的依赖关系：异步回调中使用循环变量时要特别小心
合理使用闭包：理解闭包的工作原理，但不要滥用
考虑代码可读性：有时候把异步逻辑提取成独立函数会更清晰

八、举一反三：类似的陷阱

这种问题不仅出现在setTimeout中，其他异步场景也会遇到：

javascript 复制代码

// 事件监听中的类似问题
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // 总是输出buttons.length
  });
}

// 解决方案同样适用
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(i); // 正确输出对应的索引
  });
}

九、总结

问题根源：var的作用域 + 异步执行时机
解决方案：
- IIFE创建闭包（传统方式）
- 使用let（最推荐）
- 利用setTimeout第三个参数
- 使用bind绑定参数
最佳实践：使用let/const避免这类问题

记住，在JavaScript中，同步代码和异步代码的执行时机是需要特别关注的重点。理解闭包和作用域，就能轻松应对这类问题。