在循环中调用 setTimeout 函数

Question

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

我发现我使用 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);
    }
}

我看过 其他帖子 描述了多次调用 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);
    }
}