使用JS setTimeout()时如何在循环中正确传递变量值？

问题根本原因 #

你遇到的是JavaScript经典的循环异步闭包陷阱：你代码中的循环变量n和临时变量x没有块级作用域，所有setTimeout的回调函数捕获的是同一个变量的引用，而非循环执行时的变量值。等到5秒后回调第一次执行时，整个for循环已经运行完毕，变量已经变成最终值（n=4，x=tmptext[3]），所以会出现重复最后一条或者空内容的问题。

解决方案 #

以下是3种常用的可行实现，都可以保留你需要的间隔逻辑，同时正确传入每一段文本：

1. 最简单方案：使用let块级作用域（ES6+支持，推荐）

let关键字自带块级作用域，在for循环头部声明时，每次迭代都会生成独立的变量绑定，不会出现变量共享问题：

for (let n = 0; n < 4; ++n) {
  const currentText = tmptext[n];
  setTimeout(() => {
    agent.speak(currentText);
  }, 5000 + n * 5000);
}

2. 兼容ES5方案：使用立即执行函数（IIFE）创建独立作用域

如果需要兼容不支持ES6的老旧环境，可以用IIFE把每次迭代的文本值封存在独立函数作用域中：

for (var n = 0; n < 4; ++n) {
  (function(currentText) {
    setTimeout(() => {
      agent.speak(currentText);
    }, 5000 + n * 5000);
  })(tmptext[n]);
}

3. 更简洁的数组遍历方案：forEach

直接遍历文本数组，不需要手动控制循环下标，天然自带每次迭代的独立作用域：

tmptext.forEach((currentText, index) => {
  setTimeout(() => {
    agent.speak(currentText);
  }, 5000 + index * 5000);
});

额外提示 #

所有变量都建议显式加let/const声明关键字，不要隐式创建全局变量，能避免绝大多数变量共享导致的异常问题。

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