在循环中调用setTimeout函数

I'm new to javascript and am trying to call a function using setTimeout from within a for loop. The loop executes for each member of a nodeList.

我是javascript的新手,我试图在for循环中使用setTimeout调用函数。循环为nodeList的每个成员执行。

I'm finding that the function I'm calling with setTimeout is only actually executing during the last iteration of the loop. In the example below, I would like to make three separate calls to setTimeout but I'm finding that the first two calls are ignored.

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

I have seen other posts that describe making multiple calls to setTimeout. Amazingly (to me), the multiple calls will work if I simply take them out of the for loop like this.

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

I just can't figure out why there is a difference between calling them from within a for loop and calling them outside of one.

我无法弄清楚为什么在for循环中调用它们并在一个循环之外调用它们之间存在差异。

I am getting valid return values from the setInterval call in every case.. it's just that with only the last iteration of the for loop does the function actually execute.

我在每种情况下都从setInterval调用中获得有效的返回值..只是只有for循环的最后一次迭代才能实际执行该函数。

Thanks in advance for any help.

在此先感谢您的帮助。

2 个解决方案

#1

nextAnt will be overwritten on every loop, so takeStep() will be called 3 times, but always with the same arguments.

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

You may try this instead:

您可以尝试这样做:

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

#2

If your not setting a delay, then why bother with setTimeout?

如果你没有设置延迟,那么为什么还要烦扰setTimeout?

In the loop your delay is set to 0, outside the loop you've used 10. Also, outside the loop you've assigned values to count and member, but not outside the loop?

在循环中,你的延迟设置为0,在你使用过的循环之外10.另外,在循环之外你已经为count和member分配了值,但是不在循环之外?

Try this:

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

or this:

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

#1