使用setTimeout循环调用函数并传递计数器参数的问题

兄弟，我太懂这种踩坑的感觉了！你遇到的问题其实是setTimeout的一个经典误区——你在调用setTimeout的时候，直接执行了目标函数，而不是把它作为待执行的函数引用传进去。

先看看你可能写错的代码（典型错误） #

比如你可能这么写：

function printCount(count) {
  console.log(`当前计数：${count}`);
}

// 循环调用，期望每隔1秒输出一次计数
for (let i = 0; i < 5; i++) {
  setTimeout(printCount(i), 1000 * i); // 这里会立即执行所有printCount！
}

为什么会立即执行？因为printCount(i)是函数调用表达式，代码运行到这里的时候会直接执行这个函数，把它的返回值（如果没return就是undefined）传给setTimeout，而不是告诉setTimeout“过一会儿再执行这个函数”。

三种靠谱的解决方案 #

1. 用箭头函数包裹（最直观，推荐）

把函数调用包在箭头函数里，这样setTimeout拿到的是箭头函数的引用，延迟时间到了才会执行里面的printCount(i)：

function printCount(count) {
  console.log(`当前计数：${count}`);
}

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    printCount(i);
  }, 1000 * i);
}

这里用let声明i是关键——let有块级作用域，每个循环迭代里的i都是独立的，不会出现闭包陷阱，能正确传递当前的计数。

2. 利用setTimeout的额外参数（更简洁）

ES5及以上的setTimeout支持在延迟时间后面加额外参数，这些参数会作为回调函数的参数传入：

function printCount(count) {
  console.log(`当前计数：${count}`);
}

for (let i = 0; i < 5; i++) {
  setTimeout(printCount, 1000 * i, i); // 第三个参数就是传给printCount的count
}

这种写法不用额外包裹函数，代码更清爽，适合参数不多的场景。

3. 闭包兼容旧环境（如果用var的话）

如果你的项目还在使用var（不推荐，但万一遇到），需要用闭包保存每次的计数，避免所有setTimeout都拿到最后一个i的值：

function printCount(count) {
  console.log(`当前计数：${count}`);
}

for (var i = 0; i < 5; i++) {
  // 立即执行函数，把当前i存进闭包
  (function(currentCount) {
    setTimeout(function() {
      printCount(currentCount);
    }, 1000 * currentCount);
  })(i);
}

这里的立即执行函数（IIFE）会把当前循环的i作为参数传入，形成独立的作用域，保存住currentCount的值。

总结一下 #

核心就是：别直接在setTimeout里写函数调用（比如func(i)），要传递函数引用（比如func或者包裹后的箭头函数），同时注意变量的作用域，确保计数器值能正确传递到延迟执行的函数里。

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