Simulador del Event Loop de JavaScript
Arma un pequeño script con código síncrono, microtasks y macrotasks para ver el orden exacto en que el event loop de JavaScript lo ejecutaría.
Script (en orden del código)
Orden de ejecución
| Paso 1 | console.log('1') | Síncrono (console.log) |
|---|---|---|
| Paso 2 | console.log('4') | Síncrono (console.log) |
| Paso 3 | Promise.resolve().then(() => log('3')) | Microtask (Promise.then) |
| Paso 4 | setTimeout(() => log('2'), 0) | Macrotask (setTimeout) |
Cómo funciona el simulador del event loop de JavaScript
Arma un pequeño script con código síncrono, microtasks y macrotasks para ver el orden exacto en que el event loop de JavaScript lo ejecutaría.
Las reglas del event loop
- Todo el código síncrono se ejecuta primero, de arriba hacia abajo.
- Una vez que el código síncrono termina, toda la cola de microtasks (callbacks de Promise .then, queueMicrotask) se vacía antes de que corra cualquier otra cosa.
- Luego corre la siguiente macrotask (setTimeout, setInterval), seguida inmediatamente por vaciar la cola de microtasks de nuevo — y esto se repite para cada macrotask.
Cómo usarlo
- Agrega pasos y marca cada uno como síncrono, microtask o macrotask.
- Dale a una macrotask un retraso en milisegundos — afecta el orden respecto a otras macrotasks.
- Consulta el orden de ejecución calculado a la derecha.
Errores comunes
Un `setTimeout(fn, 0)` nunca corre antes que un `Promise.resolve().then(fn)`, incluso con un retraso de 0ms — toda microtask siempre se vacía antes de que empiece la siguiente macrotask. Esto sorprende a la mayoría la primera vez que lo ven.
Privacidad
Se ejecuta localmente en tu navegador. No se envían datos al servidor.
Preguntas frecuentes
¿Por qué el callback de la Promise corre antes que setTimeout(fn, 0)?
Porque las microtasks siempre se vacían por completo antes de que el event loop tome la siguiente macrotask, sin importar el retraso de la macrotask — un timeout de 0ms no es "inmediato", es solo el retraso de macrotask más corto posible.
¿Esto cubre async/await?
No directamente como su propio tipo de paso, pero async/await está construido sobre promises por debajo — un `await` se suspende y reanuda como una microtask, igual que lo haría un callback `.then()`.
¿Este orden está garantizado en todos los navegadores?
Sí — el orden relativo de "las microtasks se vacían por completo entre macrotasks" forma parte de la especificación HTML/ECMAScript, no es un detalle de implementación, así que todo motor de JavaScript conforme a la especificación lo sigue.