En el siguiente código, el mensaje '¡Oye, tiempo de espera ejecutado!' solo se imprime después de que finaliza el bucle en la función longLoop .
setTimeout(() => console.log('Hey, timeout executed!'), 100); let longLoop = async () => { for (i = 0; i < 1000000000; i++) { } } let exec = async () => { await longLoop(); console.log('Loop finished') } exec() Sin embargo, cuando cambio longLoop para que tenga una espera dentro, aparece el mensaje '¡Oye, tiempo de espera ejecutado!' se imprimirá tan pronto como se alcance la espera en el bucle, como a continuación:
setTimeout(() => console.log('Hey, timeout executed!'), 100); let longLoop = async () => { for (i = 0; i < 1000000000; i++) { await new Promise(r => setTimeout(r, 100)); } } let exec = async () => { await longLoop(); console.log('Loop finished') } exec() ¿Por qué en el primer ejemplo el bucle de eventos parece estar bloqueado incluso si llamo a longLoop desde el exec usando una espera? ¿Y por qué no se bloquea en el segundo ejemplo simplemente usando una espera dentro del ciclo?
Recién estoy comenzando con JavaScript, así que pensé que solo con una función asíncrona y llamada con una espera dentro de otra función asíncrona, se ejecutaría de manera que el bucle de eventos no se bloquearía. Debido a eso, me está costando un poco entender el flujo de ejecución.
Este es un caso de microtareas vs (macro)tareas. Promises y async/await entran en la cola de microtareas. Las devoluciones de llamada setTimeout ingresan a la cola de tareas (macro). las microtareas se ejecutan antes que las (macro)tareas (cuando la pila está vacía para ser precisos), es por eso que ve que las funciones async/await se ejecutan antes de la devolución de llamada setTimeout
Ver también: Diferencia entre microtarea y macrotarea dentro de un contexto de bucle de eventos https://stackoverflow.com/a/71195496/4651083