本文讲解如何通过闭包机制，在 setTimeout 等异步操作中准确捕获并使用函数调用时的变量快照，避免因变量后续被修改而导致回调中读取到错误值。
本文讲解如何通过闭包机制，在 `settimeout` 等异步操作中准确捕获并使用函数调用时的变量快照，避免因变量后续被修改而导致回调中读取到错误值。
在 JavaScript 异步编程中，一个常见误区是认为回调函数会“自动记住”其定义时的变量状态。实际上，普通回调引用的是变量的当前值（即执行时的值），而非定义或调度时的值。例如：
let x = "value before setTimeout";
function cb() {
console.log(x); // ❌ 输出 "updated value"，非预期
}
setTimeout(cb, 3000);
x = "updated value"; // 主线程立即更新
上述代码中，cb 在 3 秒后执行时访问的是已被覆盖的 x，因此无法输出原始值。
✅ 正确做法是利用闭包（Closure）：在 setTimeout 调用时，立即将当时的变量值作为参数传入一个外层函数，由其返回一个绑定该值的内层函数。该值被保留在闭包作用域中，不受外部变量变更影响：
let x = "value before setTimeout";
function cb(currentValue) {
return function() {
console.log(currentValue); // ✅ 输出 "value before setTimeout"
console.log("x now:", x); // 可选：对比当前值 → "x now: updated value"
};
}
setTimeout(cb(x), 3000); // ⚠️ 注意：这里调用的是 cb(x)，返回函数，而非 cb
x = "updated value";
关键点解析：
-
cb(x)立即执行，接收当前x的值（字符串"value before setTimeout"），并返回一个新函数； - 返回的函数内部通过词法作用域访问
currentValue参数——该参数在闭包中被持久化； -
setTimeout接收的是这个已绑定值的函数，因此延迟执行时仍能准确输出原始值。
? 进阶技巧：也可使用箭头函数简化写法：
const x = "value before setTimeout"; setTimeout(() => console.log(x), 3000); x = "updated value"; // 仍输出原始值（因箭头函数定义时捕获了 x 的当前值）
⚠️ 注意：此简写仅在 x 是基本类型且未被重新赋值的前提下成立；若 x 是对象且属性被修改，则需深拷贝或冻结对象以确保状态一致性。
总结：要可靠捕获异步调用时刻的值，核心是将瞬时值显式传入闭包，而非依赖对可变变量的后期读取。这是处理定时器、事件监听器、Promise 回调等场景的通用范式。
