如何捕获异步函数调用时的变量值？实现回调打印初始值

给定代码：

let x = "value before setTimeout";

function cb() {
    console.log(currentValue); 
}

setTimeout(cb, 3000);

x = "updated value";

要让回调打印出value before setTimeout，核心是在调度异步任务时，捕获变量当时的快照值，避免后续变量更新影响回调的读取。以下是几种实现方式：

方法1：利用立即执行函数（IIFE）创建闭包 #

通过立即执行函数将当前的x值传入，让返回的回调函数保留对这个值的引用：

let x = "value before setTimeout";

setTimeout((function(currentValue) {
  return function() {
    console.log(currentValue);
  };
})(x), 3000);

x = "updated value";

IIFE会在setTimeout调度时立即执行，把当时的x值作为参数存入闭包，后续外部x更新不会影响回调内的currentValue。

方法2：封装回调生成函数 #

专门写一个函数来生成带捕获值的回调，清晰分离逻辑：

let x = "value before setTimeout";

function createCallback(currentValue) {
  return function() {
    console.log(currentValue);
  };
}

setTimeout(createCallback(x), 3000);

x = "updated value";

调用createCallback时传入当时的x，返回的回调会永久保留这个参数值，不受外部变量变化影响。

方法3：用bind绑定参数 #

通过Function.prototype.bind将旧值绑定为回调的固定参数：

let x = "value before setTimeout";

function cb(currentValue) {
  console.log(currentValue);
}

setTimeout(cb.bind(null, x), 3000);

x = "updated value";

bind会创建一个新函数，把当前的x值绑定为第一个参数，回调执行时会直接使用这个绑定好的旧值。

内容的提问来源于stack exchange，提问作者MORNING BEAST