解决 JS for 循环中 setTimeout 索引输出错误的闭包问题

一、现象复现：为什么输出全是 5？

编写 JavaScript 异步操作或动画排队时，初学者经常会写出如下结构的经典代码：希望利用循环创建一组定时器，在指定延时后依次打印出对应的循环索引 0, 1, 2, 3, 4。

// 经典问题代码示例
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

// 预期的输出：0, 1, 2, 3, 4
// 实际控制台输出：5, 5, 5, 5, 5

运行这段代码后，控制台并没有如期依次打印出从 0 到 4 的数值，而是在大约 100 毫秒后一口气打印出了五个 5。如果把循环次数增加到 10，输出的结果就会变成连续十个 10。

这个现象初看违反直觉：明明在循环体中，每一次迭代时 i 的数值都是不同的，为什么当定时器函数真正执行的时候，拿到的全部是循环终止后的最终值？要彻底搞清这一点，必须将事件循环（Event Loop）与变量作用域机制结合起来分析。

二、深入剖析：事件循环与执行时差

JavaScript 是一门单线程语言，其异步操作的执行依赖于事件循环系统。浏览器的 JavaScript 引擎在执行代码时，将任务分为同步执行栈（Call Stack）与任务队列（Task Queue）两大板块。

在上面的代码中，for 循环体本身是纯粹的同步任务，而 setTimeout 的回调函数则是典型的异步宏任务（MacroTask）。它们的执行过程存在显著的时间差：

1. 主线程极速跑完循环：主调用栈按顺序执行 for 循环。从 i = 0 递增到 i = 4，每次循环都会调用一次 setTimeout()。浏览器底层的计时线程会接收到 5 个定时请求，但回调函数此时绝不会立即执行，而是处于等待就绪状态。
2. 循环条件终止与变量定格：当 i 从 4 递增为 5 时，条件判断 5 < 5 为 false，循环正式退出。整个同步循环通常只需要不到 0.2 毫秒即可全部执行完成。此时，全局作用域中的变量 i 的值已经变成了 5。
3. 延时到期并排队入栈：约 100 毫秒之后，五个定时器的计时完毕，它们的回调函数依次被推入宏任务队列。当主线程完全处于空闲状态时，事件循环机制才会把宏任务队列中的回调取出来，推入主调用栈执行。
4. 回调寻址读取当前值：当回调函数执行 console.log(i) 时，它自身内部并没有声明变量 i，因此它沿着作用域链向外层查找。此时外层的 i 早已在 100 毫秒前被修改成了 5，于是每个回调打印出的数字都是 5。

图 1：事件循环（Event Loop）中同步主调用栈与异步宏任务队列的时序执行流程

三、根本机制：闭包引用与词法作用域

许多开发者在初学时会有这样一个误解：“闭包难道不会把当时的数值‘快照’保存下来吗？”答案是：不会。闭包捕获的是变量的引用（Reference），而不是变量当前数值的副本。

1. var 的作用域缺陷

在 ES6 之前，JavaScript 只有全局作用域（Global Scope）和函数作用域（Function Scope），根本不存在块级作用域（Block Scope）。在 for (var i = 0; ...) 中，通过 var 声明的变量 i 会被提升并挂载到当前函数作用域或全局作用域中。

这意味着整个程序在内存中只分配了一个名为 i 的存储空间。五个 setTimeout 回调函数虽然各自独立，但它们所形成的闭包作用域链，最终指向的都是同一个全局内存地址。随着循环不断递增，这个内存地址上的数字不断被覆写，直到变成 5。

2. let 的词法环境绑定（Lexical Environment）

ES6 引入了 let 关键字，带来了真正的块级作用域。更重要的是，ECMAScript 规范专门针对 for (let ...) 循环做了特别设计：每一次循环迭代，都会产生一个全新的词法环境（Lexical Environment）。

当使用 let 时，第 0 次循环内部的 i、第 1 次循环内部的 i，在底层是相互独立的独立变量绑定。每个回调函数的闭包各持有一个独立的块级词法作用域。当回调函数稍后在宏任务中被调用时，沿着各自的作用域链向上查找到的，正是当时属于那一次迭代的私有 i。

图 2：var 共享单一作用域与 let 每次迭代独立词法环境的内存引用对比

四、常见误区辨析：delay 设为 0 能解决问题吗？

// 尝试将 delay 设为 0
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 0);
}

// 实际运行结果依然是：5, 5, 5, 5, 5

这种思路看似合理，但违背了事件循环的底层运行准则。在 HTML5 规范中，即使 setTimeout 的延迟时间设为 0（浏览器实际最小延时约为 1~4ms），它依然是一个异步宏任务。JavaScript 引擎的规定十分严格：在当前同步调用栈中的代码彻底执行完毕之前，绝对不会执行任何宏任务队列中的回调函数。

因此，即便延迟为 0，主线程也必须把整个 for 循环全部跑完，直到 i 递增到 5、循环条件判定失败退出、执行栈彻底清空之后，才会去检查任务队列。届时 i 的值依然早已是 5。延迟长短只决定了任务何时入队，绝不能打破“同步先于异步”的铁律。

五、四种可落地的解决方案

解决该问题的关键思路非常纯粹：切断所有回调函数对同一个全局可变变量的共享引用，为每一次迭代提供独立的、不可篡改的值。在日常开发中，有四种成熟且常用的解决方案。

方案 1：使用 ES6 let 关键字（现代标准首选）

将 var 直接替换为 let，这是最符合现代 JavaScript 编码规范、代码最为简洁清爽的解法。

// 方案 1 代码示例：let 块级作用域
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

// 运行结果：0, 1, 2, 3, 4

实现机制：在 for (let i = 0; ...) 结构中，JavaScript 引擎会为每一次迭代自动创建一个新的块级作用域，并在当前作用域中新建一个不可被后续迭代修改的变量 i。定时器回调函数形成的闭包各自绑定到对应轮次的块级环境，完全不产生变量污染。

方案 2：使用立即执行函数表达式（IIFE，ES5 经典方案）

在不支持 ES6 语法的旧版浏览器环境或需要通过 Babel 等工具降级打包的工程中，可以通过构建局部函数作用域来锁定变量。

// 方案 2 代码示例：IIFE 函数级隔离
for (var i = 0; i < 5; i++) {
  (function(index) {
    setTimeout(function() {
      console.log(index);
    }, 100);
  })(i);
}

// 运行结果：0, 1, 2, 3, 4

实现机制：利用了 JavaScript 中函数参数按值传递（Pass by Value）的特性。每次循环时，立即执行函数被同步调用，将当时的全局 i 作为实参传入。形参 index 是该函数内部的局部私有变量。即使外部的全局 i 后续变成了 5，立即执行函数内部的 index 依然牢牢锁定在传入的那一刻。

方案 3：利用 setTimeout 的原生附加参数（零额外闭包）

很多人只熟悉 setTimeout(fn, delay) 接受两个参数，但实际上 Web API 的 setTimeout 原生支持传入第三个及更多附加参数：setTimeout(fn, delay, arg1, arg2, ...)。这些参数会在定时器触发时，作为实参自动传给回调函数。

// 方案 3 代码示例：原生附加参数
for (var i = 0; i < 5; i++) {
  setTimeout(function(val) {
    console.log(val);
  }, 100, i);
}

// 运行结果：0, 1, 2, 3, 4

实现机制：在每次执行 setTimeout 注册定时器时，浏览器引擎会立即对第三个参数 i 进行求值，并将计算出的原始数值保存在底层定时器数据结构中。当 100 毫秒后回调函数被触发时，该数值会被作为参数 val 注入回调。这种方式无需手写外层包装函数，运行效率高且内存开销低。

方案 4：使用 Function.prototype.bind 预先绑定参数

如果回调函数本身是已有的通用具名函数，或者追求函数式编程风格，可以使用 bind 方法预先固化实参。

// 方案 4 代码示例：bind 预设实参
function printIndex(index) {
  console.log(index);
}

for (var i = 0; i < 5; i++) {
  setTimeout(printIndex.bind(null, i), 100);
}

// 运行结果：0, 1, 2, 3, 4

实现机制：printIndex.bind(null, i) 会返回一个新的包装函数，并将当前的 i 作为柯里化预设实参锁定在新函数的上下文中。定时器触发执行新函数时，无需访问外部任何动态变量即可完成输出。

图 3：四种有效解决方案的实现步骤与数据捕获机制

六、方案横向对比与技术选型指南

四种方案在语法表达、运行开销以及兼容性方面各有特点。在实际项目开发中，可以参照下表进行权衡与选用：

图 4：闭包索引输出异常总结与技术选型决策树

七、核心总结与最佳实践清单

解决 for 循环中 setTimeout 索引输出错误的过程，本质上是理解 JavaScript 异步调度与作用域绑定生命周期的绝佳范例。在日常编码中，遵循以下三条实践清单可以彻底规避此类陷阱：

• 彻底弃用 var：全面拥抱 let 和 const。let 提供的块级作用域能够从语法层面天然杜绝循环体内的异步共享变量污染。
• 时刻牢记事件循环先同步后异步：无论 setTimeout 延时是 0 毫秒还是 1000 毫秒，其回调函数必然等到所有同步代码执行完后才会触发。切勿在异步回调中直接依赖外部处于可变状态的同步循环计数器。
• 按需选用值捕获手段：若在老旧项目维护中受限于环境无法使用 let，优先使用 setTimeout(fn, delay, ...args) 或 IIFE 将变量转化为函数私有作用域下的不可变副本。