Fundamentos de asincronía: event loop, call stack y colas

Entiende por qué el código asíncrono se ejecuta en cierto orden y evita bugs de sincronización.

JavaScript ejecuta una sola pila principal, pero coordina tareas asíncronas con colas.

Entender event loop evita errores de orden en UI, fetch y timers.

Microtareas (promesas) y macrotareas (setTimeout) no se procesan igual.

El orden real de ejecución es más importante que la apariencia lineal del código.

  • Stack ejecuta, colas esperan, loop coordina.
  • Call stack: funciones que se ejecutan ahora.
  • Task queue: callbacks de timers/eventos.
  • Microtask queue: promesas y `queueMicrotask`.
  • Event loop: decide qué entra al stack y cuándo.

Arquitectura mental mínima

Stack ejecuta, colas esperan, loop coordina.

  • Call stack: funciones que se ejecutan ahora.
  • Task queue: callbacks de timers/eventos.
  • Microtask queue: promesas y `queueMicrotask`.
  • Event loop: decide qué entra al stack y cuándo.

Errores comunes por mal modelo mental

El bug típico: asumir orden síncrono donde no existe.

Un `setTimeout(..., 0)` no significa inmediato: solo se encola y espera turno.

Las promesas resueltas van a microtask queue y se ejecutan antes que la siguiente macrotarea.

Patrón práctico para flujos asíncronos

Separa inicio, trabajo asíncrono y cierre.

JavaScript
34

Fundamentos de asincronía: event loop, call stack y colas

Entiende por qué el código asíncrono se ejecuta en cierto orden y evita bugs de sincronización.

Código del tema: call stack | task queue | microtask queue | event loop

📘 Teoría

Arquitectura mental mínima

Stack ejecuta, colas esperan, loop coordina.

  • Call stack: funciones que se ejecutan ahora.
  • Task queue: callbacks de timers/eventos.
  • Microtask queue: promesas y `queueMicrotask`.
  • Event loop: decide qué entra al stack y cuándo.

Errores comunes por mal modelo mental

El bug típico: asumir orden síncrono donde no existe.

1

Un `setTimeout(..., 0)` no significa inmediato: solo se encola y espera turno.

2

Las promesas resueltas van a microtask queue y se ejecutan antes que la siguiente macrotarea.

Patrón práctico para flujos asíncronos

Separa inicio, trabajo asíncrono y cierre.

🧭 Visuales clave

Asincronía y event loop

Aclara el orden real de ejecución entre código síncrono y asíncrono.

Esquema de call stack, cola de tareas y event loop

🧪 Aprende probando

Ejemplo Ejemplo guiado: predice el orden Identifica qué se ejecuta primero entre sync, promise y timeout.

🏁 Retos

Reto Reto: añade microtarea explícita Usa `queueMicrotask` para reforzar el orden de colas.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript
CodePen: fetch y APIs
Abrir en CodePen

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com