在循環中調用setTimeout函數

Question

我是javascript的新手，我試圖在for循環中使用setTimeout調用函數。 循環為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);
    }
}

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