0
180
VistasNo se puede hacer un temporizador con while loop
Estoy tratando de crear un temporizador con bucles while y setTimeout, pero cada vez que doy una entrada, el código falla. Pensé que hacerlo de esta manera funcionaría, pero parece que no. ¿Cuál es el problema aquí? ¿Y cómo logro lo que quiero con while loop y setTimeout?
function countdown(durationInput) { while (durationInput > 0) { setTimeout(() => { console.log(durationInput) durationInput = durationInput - 1 console.log(durationInput) }, 1000) } }2 Respuestas
Responde la pregunta0
Pues mira esta imagen. Lo que ves es lo básico de cómo funciona javascript.
JS es de un solo subproceso. Eso significa que 1 núcleo hace el trabajo. Ese es el bucle de eventos.
El bucle de eventos toma el evento de la cola de devolución de llamada, lo coloca en la pila de llamadas y lo ejecuta.
Si ejecuta setTimeout , lo pone en la cola de devolución de llamada
El problema: cuando el ciclo de eventos está bloqueado por una tarea sincrónica como su ciclo while , eso significa que el ciclo de eventos no puede capturar los eventos en la pila porque está bloqueado.
Lo que sucede es: El bucle while se ejecuta y se ejecuta y agrega más y más eventos setTimeout a la cola de devolución de llamada hasta que el programa falla.
1 posible solución podría ser usar promesas:
async function sleep(ms) { return new Promise(res => { setTimeout(res, ms) }) } async function sleep(ms) { return new Promise(res => { setTimeout(res, ms) }) } async function main() { console.log("waiting 5 seconds without blocking the main thread") await sleep(5000) console.log("done") } main()0
El problema es que está generando un bucle infinito, ya que la entrada de durationInput no se actualiza hasta que se ejecuta setTimeout . Y estás llenando la pila de ejecución con una señal enorme.
Para solucionarlo, debe crear una variable que almacene el valor inicial de la entrada de durationInput y reste de la duración en el bucle while.
function countdown(duration, intervalInSeconds = 1) { let count = duration; while (duration > 0) { setTimeout(() => { console.log(count--); }, intervalInSeconds * 1000); duration--; } } countdown(10);