function x() { for (let i = 1; i <= 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } console.log("Hello World!!"); } x();La función anterior produce la salida 1 a 5, pero tarda 1 segundo en producir cada salida. Y eso es lo que no obtengo... ¿Por qué tarda 1 segundo cada uno y por qué no 1 segundo para el primer valor de i, luego 2 segundos para el segundo valor de i y así sucesivamente mientras multiplico los milisegundos con el ¿yo valoro?
Si desea el comportamiento de agregar i segundos cada vez, haga algo como:
function x(i, max = Infinity) { if (i > max) return console.log("Hello World!! %s", i); setTimeout(function() { console.log(i); x(i + 1, max) }, i * 1000); } x(1, 5);La principal confusión que tiene es bastante común y proviene del hecho de que está utilizando un bucle. Todo lo que está fuera de la devolución de llamada del temporizador es JavaScript que se ejecuta sincrónicamente sin demora. El bucle se ejecuta 5 veces inmediatamente cuando ejecuta el código y, por lo tanto, 5 instancias de la función de devolución de llamada del temporizador se colocan en la cola de eventos en cuestión de milisegundos y es a partir de ese momento que las 5 devoluciones de llamada del temporizador se retrasan, en lugar de una. la devolución de la llamada se retrasa desde la finalización de la anterior .
La primera instancia de la devolución de llamada se ejecuta después de que se alcanza su retraso inicial (1 segundo), luego la segunda instancia se ejecuta después de su retraso (2 segundos, que es solo 1 segundo más tarde que cuando se ejecutó la primera llamada de función) y luego la tercera corre (que está solo 1 segundo detrás del anterior de 2 segundos) y así sucesivamente.
Lo que debe hacer es colocar la primera instancia de la devolución de llamada en la cola de eventos con un retraso de 1 segundo antes de que se ejecute y luego, cuando la primera instancia se haya completado , coloque otra instancia en la cola de eventos con un retraso de 2 segundos, y así. en.
Para hacer esto, olvide el bucle y haga que la función del temporizador sea recursiva, lo que esencialmente provocará una llamada de código repetitiva, tal como lo haría un bucle.
let delay = 1000; let timer = null; // Will hold a reference to the timer function x() { timer = setTimeout(function(){ console.log(delay / 1000); delay += 1000; if(delay > 5000){ clearTimeout(timer); // Cancel the timer console.log("Operation Complete!"); } else { // Because the next call for the parent function comes from within // the timer callback function, it is delayed until the end of that // callback function's execution. x(); } }, delay); } x();