别再被setTimeout闭包坑了！90% 的人都写错过这个经典循环

在 JavaScript 中，setTimeout 是最常用的异步工具之一。但当它和 for 循环、闭包一起出现时，无数开发者都踩过同一个坑：

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 你期待输出 0,1,2？实际却是 3,3,3！
  }, 100);
}

为什么？
因为 var + setTimeout + 闭包 = 变量共享陷阱。

今天我们就彻底拆解这个经典问题，并告诉你如何用现代 JS 写出正确、安全、可维护的延迟逻辑。

问题根源：var 的函数作用域 + 异步执行

关键点有二：

1. var 没有块级作用域

for 循环中的 var i 实际上是在整个函数（或全局）作用域中声明一次，所有循环迭代共享同一个 i。

2. setTimeout 是异步的

当 setTimeout 的回调真正执行时，for 循环早已结束，此时 i 的值已经是 3（循环终止条件）。

所以三个回调都引用了同一个已经变成 3 的变量i。

常见错误解法（别再用了！）

解法一：用 setTimeout 第三个参数传参（可行但不推荐）

for (var i = 0; i < 3; i++) {
  setTimeout((x) => {
    console.log(x);
  }, 100, i); // 把 i 作为参数传入
}

虽然能工作，但：

• 语义不直观；
• 回调函数签名被污染；
• 在复杂逻辑中难以维护。

解法二：立即执行函数（IIFE）——过时方案

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

这确实能创建新作用域，但：

• 代码冗长；
• 阅读成本高；
• ES6 之后已有更优雅方案。

正确姿势：用 let 声明循环变量

这是最简单、最现代、最推荐的方式：

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 输出 0, 1, 2 
  }, 100);
}

为什么 let 能解决？

• let 具有块级作用域；
• 每次循环迭代都会创建一个新的绑定（binding）；
• 每个 setTimeout 回调捕获的是当前迭代的独立 i，互不干扰。

更复杂的场景：循环中创建函数数组

陷阱不止出现在 setTimeout，任何异步回调或延迟执行的函数都可能中招：

const handlers = [];
for (var i = 0; i < 3; i++) {
  handlers.push(() => console.log(i));
}

handlers.forEach(fn => fn()); // 输出 3,3,3 

修复方式同样简单：

const handlers = [];
for (let i = 0; i < 3; i++) {
  handlers.push(() => console.log(i)); // 输出 0,1,2 
}

或者用 Array.map 等函数式写法，天然避免问题：

const handlers = [0, 1, 2].map(i => () => console.log(i));

特别提醒：Node.js 和浏览器都一样！

这个陷阱与运行环境无关，无论是：

• 浏览器中的事件；
• Node.js 中的定时任务；
• React/Vue 中的副作用处理；

只要涉及 var + 异步 + 循环，就可能出错。

终极建议：彻底告别 var

在现代 JavaScript 工程中：

• 默认使用const（不可变绑定）；
• 需要重赋值时用let；
• 永远不要用var（除非维护老代码）。

配合 ESLint 规则：

{
  "rules": {
    "no-var": "error"
  }
}

从源头杜绝此类问题。

结语

setTimeout 本身没有错，错的是我们对作用域和闭包的理解偏差。
而 let 的出现，正是为了终结这类“反直觉”的陷阱。

下次当你写循环+异步时，请记住：

升级你的语法，远离闭包陷阱！

转发给那个还在用 var 写循环的同事吧！

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点攒、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！