Javascript 变量在setTimeout（）中作为参数传递时丢失

我在使用setTimeout函数中的参数调用函数时遇到问题。基本上，我正在尝试制作一个小的在线游戏，在那里我创建一个命令队列，然后一次执行一个命令（每个命令都需要一些时间来显示可视化效果）

不幸的是，我似乎无法在setTimeout（）中传递任何变量作为参数。虽然在调用函数时变量确实存在，但在以后执行时它并不存在。函数不跟踪传递的值

有什么解决办法吗？非常感谢你的帮助。以下是我使用的代码：

function executeCommands() {
    var commands = document.getElementsByClassName("cmdplace");
    var timeout = 0;
    for (i = 0; i < commands.length; i++) {
        console.log(commands[i].childNodes[0]); //variable exists
        setTimeout(function() {go(commands[i].childNodes[0]);}, timeout+=400);  //Uncaught TypeError: Cannot read property 'childNodes' of undefined
        console.log(commands[i].childNodes[0]); //variable still exists
    }
}

function go(command) {
    //do somethig based on the passed command
}

函数executeCommands（）{
var commands=document.getElementsByClassName（“cmdplace”）；
var超时=0；
对于（i=0；i

调用函数时，

i

等于

命令。长度
和
命令[i]
是
未定义的


它们捕获的是变量
i
，而不是它的值。

当它们执行时，它们会超出实际值
i
，但到目前为止，它已经达到
commands.length
（这是用于中断循环的条件）

您可以这样做来解决这个问题：

setTimeout(function(j) {
    go(commands[j].childNodes[0]);
}.bind(null, i), timeout+=400);

或者这个：

setTimeout((function(j) {
    return function() {
        go(commands[j].childNodes[0]);
    };
})(i), timeout+=400);

还要注意，正如您定义的，
i
是一个全局变量


正如@PMV在评论中提到的，在现代JavaScript中有一种更简单的方法（如果您可以选择的话）。

只需使用
let
语句，如下所示：

for (let i = 0; i < commands.length; i++) {
    // do whatever you want here with i
}

for（设i=0；i

这将确保每次迭代都会得到一个名为
i
的新变量，您可以像在原始代码中一样捕获它。
您需要为每个项目创建一个不同的副本。当
setTimeout
运行时，循环已经完成


var超时=0；
函数executeCommand（）{
var commands=document.getElementsByClassName（“cmdplace”）；
对于（i=0；i

A
B
C
D
什么是go（）？…啊，对不起。go（）是我的函数，它根据传递的命令执行某些操作。@PetrHofman，您可以在下面看到我的答案ES6有一种更简单的方法：只需使用
let
语句：
for（let i=0；i
。这将确保每次迭代都获得一个名为
i
的新变量进行捕获。@PMV是的。我正在添加注释，并提及答案。谢谢。@Petr hofman请阅读此内容