在循环中调用 setTimeout 函数

Question

我是 javascript 新手，正在尝试使用 setTimeout 从 for 循环中调用函数。循环针对 nodeList 的每个成员执行。

我发现我用 setTimeout 调用的函数实际上只是在循环的最后一次迭代期间执行。在下面的示例中，我想对 setTimeout 进行三个单独的调用，但我发现前两个调用被忽略了。

function moveants(e, stepdistance) {

    . . . . .

    for(var i = 0; i < 3; i++)
    {
        var nextAnt = antgroup.childNodes[i]
        nextAnt.count = 0;
        nextAnt.member = i;
        setTimeout(function () { takeStep(nextAnt, mouseclickX, mouseclickY, 10) }, 0);
    }
}

function takeStep(ant, destX, destY, stepDistance) {

    . . . .

    . . . .

    if( condition )
    {
        return;
    }
    else
    {
        takeStep(ant, destX, destY, stepDistance);
    }
}

我看到other posts 描述了多次调用 setTimeout。令人惊讶的是（对我来说），如果我像这样简单地将它们从 for 循环中取出，多个调用将起作用。

    setTimeout(function () { takeStep(antgroup.childNodes[0], 
         mouseclickX, mouseclickY, 10) }, 10);
    setTimeout(function () { takeStep(antgroup.childNodes[1], 
         mouseclickX, mouseclickY, 10) }, 10);
    setTimeout(function () { takeStep(antgroup.childNodes[2], 
         mouseclickX, mouseclickY, 10) }, 10);

我只是不明白为什么在 for 循环中调用它们和在循环之外调用它们之间存在差异。

在每种情况下，我都从 setInterval 调用中获得了有效的返回值。只是只有 for 循环的最后一次迭代，函数才会真正执行。

提前感谢您的帮助。

Answer 1

nextAnt 将在每个循环中被覆盖，因此 takeStep() 将被调用 3 次，但始终使用相同的参数。

你可以试试这个：

(function(a,b,c){
     setTimeout(function(){
                           takeStep(a,b,c,10)}, 0);
      })(nextAnt, mouseclickX, mouseclickY);

Answer 2

如果您没有设置延迟，那么为什么还要麻烦 setTimeout？

在循环中，您的延迟设置为 0，在您使用的循环外设置为 10。此外，在循环外，您已将值分配给 count 和 member，但不在循环外？

试试这个：

function moveants(e, stepdistance)
{
    for (var i = 0; i < 3; i++)
    {
        setTimeout("takeStep(antgroup.childNodes[i], mouseclickX, mouseclickY, 10)", 0);
    }
}

或者这个：

function moveants(e, stepdistance)
{
    for (var i = 0; i < 3; i++)
    {
        takeStep(antgroup.childNodes[i], mouseclickX, mouseclickY, 10);
    }
}