javascript - 在 setTimeout 函数方法中使用具有变化值的变量？

Question

如果我以错误的 Angular 来到这个街区，请告诉我。我有一系列我想触发的功能，我希望能够将它们全部设置在一个循环中。

for(var jj = 0; jj<monster.frames.length;jj++){
    setTimeout(
        functionName(jj),
        1000*jj
    );
}

问题是当 functionName(jj) 被执行时，它被传递给 jj 的值，到那时它已经被更改为最后一个循环迭代值(value)。

Answer 1

您需要确保内部函数在每次迭代时都有一个新变量。最简单的方法是创建一个自执行的匿名函数，它接收变量作为参数。您还需要修复调用函数的方式 - 现在您将 functionName(jj) 的返回值注册为回调。仅当该函数实际返回一个函数时才可以。

for(var jj = 0; jj<monster.frames.length;jj++){
    (function(jj) {
        setTimeout(
            function() { functionName(jj); },
            1000*jj
        );
    })(jj);
}

您还可以使用部分应用 来创建新函数。但是，旧浏览器不支持 Function.prototype.bind，因此您必须为其添加一个 shim。

for(var jj = 0; jj<monster.frames.length; jj++){
    setTimeout(functionName.bind(this, jj), 1000*jj);
}