如何在setTimeout中调用匿名函数？循环回调变量修正方案

嘿，我完全懂你碰到的这个坑！循环里嵌套setTimeout，回调函数又太大没法塞在循环里，结果把回调抽成独立函数后，拿不到正确的循环变量对吧？这本质是闭包和作用域的问题——当setTimeout的回调触发时，循环早就跑完了，独立函数拿到的是循环变量最终的值，而不是每个迭代时的数值。

别担心，有几种靠谱的解决办法，我给你一一拆解：

1. 用立即执行函数（IIFE）捕获当前循环变量 #

这是兼容旧环境的经典方案，通过IIFE创建一个独立的作用域，把当前迭代的变量值存起来，再传给你的独立回调：

// 你的大回调函数，改成接受参数的形式
function bigCallback(currentValue) {
  // 这里写你原来的大段逻辑，用currentValue代替原来的循环变量
  console.log("当前值：", currentValue);
}

for (var i = 0; i < 5; i++) {
  // 用IIFE把当前的i封装到独立作用域里
  (function(loopValue) {
    setTimeout(function() {
      bigCallback(loopValue);
    }, 100 * i); // 加个延迟差方便看效果
  })(i); // 把当前迭代的i传进去
}

原理是每个IIFE都会创建一个新的作用域，loopValue会保存当前迭代时i的副本，不会被后续循环修改。

2. 用ES6的let声明循环变量（最简洁） #

如果你项目支持ES6+，这是最省心的方案。let在for循环里会自动为每个迭代创建块级作用域，每个迭代的变量都是独立的：

function bigCallback(currentValue) {
  console.log("当前值：", currentValue);
}

// 把var改成let就行！
for (let i = 0; i < 5; i++) {
  setTimeout(() => bigCallback(i), 100 * i);
}

这里每个循环迭代的i都是单独的变量，setTimeout的回调会正确捕获当前迭代的i值，完全不用额外处理。

3. 用bind预先绑定参数 #

还可以通过Function.prototype.bind给你的独立回调预先绑定当前的循环变量，生成一个新的函数传给setTimeout：

function bigCallback(currentValue) {
  console.log("当前值：", currentValue);
}

for (var i = 0; i < 5; i++) {
  // bind第一个参数是this（这里用null就行），第二个开始是要绑定的参数
  setTimeout(bigCallback.bind(null, i), 100 * i);
}

bind会返回一个新函数，这个函数被调用时会把预先绑定的i值传给bigCallback，这样也能拿到每个迭代的正确数值。

总结一下：如果环境允许，优先用let的方案，代码最简洁；要兼容旧浏览器的话，IIFE或者bind都可以。关键就是要让每个setTimeout的回调都能捕获到当前迭代时的变量副本，而不是共享循环结束后的变量值。

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