funcion - settimeout javascript loop

Llamar a la función setTimeout dentro de un bucle

Question

Soy nuevo en javascript y estoy tratando de llamar a una función usando setTimeout desde dentro de un ciclo for . El ciclo se ejecuta para cada miembro de un nodeList.

Estoy descubriendo que la función que estoy llamando con setTimeout solo se está ejecutando durante la última iteración del ciclo. En el siguiente ejemplo, me gustaría hacer tres llamadas separadas a setTimeout, pero descubro que las primeras dos llamadas se ignoran.

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);
    }
}

He visto otras publicaciones que describen cómo hacer múltiples llamadas a setTimeout. Sorprendentemente (para mí), las llamadas múltiples funcionarán si simplemente las quito del ciclo for como este.

    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);

Simplemente no puedo entender por qué hay una diferencia entre llamarlos desde dentro de un ciclo for y llamarlos fuera de uno.

Obtengo valores devueltos válidos de la llamada setInterval en todos los casos ... es solo que con solo la última iteración del ciclo for funciona realmente la función.

Gracias de antemano por cualquier ayuda.

Answer 1

Si no establece un retraso, ¿por qué molestarse con setTimeout?

En el ciclo, su retraso se establece en 0, fuera del ciclo que ha utilizado. 10. Además, fuera del ciclo, ha asignado valores para contar y miembro, pero no fuera del ciclo.

Prueba esto:

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

o esto:

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

Answer 2

nextAnt se sobrescribirá en cada ciclo, por lo que se llamará a takeStep () 3 veces, pero siempre con los mismos argumentos.

Puede intentar esto en su lugar:

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