Crear una pausa dentro de un ciclo while en javascript

Question

Me gustaría crear una pausa dentro de un loop while para que pueda crear n animaciones que aparecen 3 segundos después de la otra.

He intentado lo siguiente, pero no funciona. Me encantaría que alguien me muestre lo que estoy haciendo mal. ¡¡Gracias!!

i=0; 
while (i < n) { 
    someanimation(); 
    setTimeout(function(){ 
     i++; 
    }, 3000); 

}; 

Answer 1

setTimeout no se detenga; le pide a Javascript que ejecute algún otro código más tarde.

Google para "setTimeout loop" le dice exactamente lo que necesita saber. Si observa un poco, incluso menciona setInterval. La diferencia: usar setTimeout en loop esperará 3 segundos entre bucles, mientras que setInterval hará que tome 3 segundos en total para el bucle (incluyendo el tiempo que demore la animación, siempre que sea menos de 3 segundos :)). Además, setInterval construye un ciclo infinito del que tendrá que salir después del número deseado de veces; setTimeout requiere que construyas el loop tú mismo.

i = 0; 

function animation_loop() { 
    someAnimation(); 
    setTimeout(function() { 
    i++; 
    if (i < n) { 
     animation_loop(); 
    } 
    }, 3000); 
}; 
animation_loop(); 

i = 0; 
someAnimation(); 
setInterval(function() { 
    i++; 
    if (i < n) { 
    someAnimation(); 
    } 
}, 3000); 

Answer 2

usted no es muy específico sobre lo que quiere hacer, pero yo diría que el principal problema es que llame someanimation() sin demora. Así que tal vez esto lo resuelve para usted:

for (var i = 0; i < n; i++) { 
    setTimeout(someanimation, 3000 * i); 
}; 

Nota la falta () después someanimation ya que es la devolución de llamada para setTimeout().

Answer 3

crear una función como:

function sleep_until (seconds) { 
    var max_sec = new Date().getTime(); 
    while (new Date() < max_sec + seconds * 1000) {} 
    return true; 
} 

y luego cambiar el código para

i=0; 
while (i < n) { 
    someanimation(); 
    sleep_until(3); 
    do_someotheranimation(); 
}; 

Answer 4

setTimeout es un poco más complicado que eso, porque no bloquea (es decir, que no termina de espera en el tiempo de espera antes de continuar con el programa).

Lo que queremos es más cercano a esto:

var i = 0; 
function nextFrame() { 
    if(i < n) { 
     someanimation(); 
     i++; 
     // Continue the loop in 3s 
     setTimeout(nextFrame, 3000); 
    } 
} 
// Start the loop 
setTimeout(nextFrame, 0); 

También puede ser que valga la pena leer sobre setInterval como una posible alternativa.

Answer 5

function myFunction() { 
    var x; 
for(var i=0;i<10;i++){ 
    if (confirm("Press a button!") == true) { 
     x = "You pressed OK!"; 
    } else { 
     x = "You pressed Cancel!"; 
    } 
    document.getElementById("demo").innerHTML = x; 
} 
}`` 

Answer 6

Una de las maneras de hacerlo es utilizar RxJS. Por favor, eche un vistazo a working example here

Rx.Observable 
    .interval(1000) 
    .take(10) 
    .subscribe((x) => console.log(x))