Bucle de eventos de JavaScript: Ejecución asíncrona no bloqueante

El bucle de eventos de JavaScript gestiona las operaciones asíncronas ejecutando callbacks de una cola cuando la pila de llamadas está vacía, evitando el bloqueo del hilo.

Loop. Control structure repeating code until condition is met. Generated ELI5 content

        graph LR
  Center["Bucle de eventos de JavaScript: Ejecución asíncrona no bloqueante"]:::main
  Pre_variable["variable"]:::pre --> Center
  click Pre_variable "/terms/variable"
  Rel_iteration["iteration"]:::related -.-> Center
  click Rel_iteration "/terms/iteration"
  Rel_recursion["recursion"]:::related -.-> Center
  click Rel_recursion "/terms/recursion"
  Rel_closed_loop_life_support["closed-loop-life-support"]:::related -.-> Center
  click Rel_closed_loop_life_support "/terms/closed-loop-life-support"
  classDef main fill:#7c3aed,stroke:#8b5cf6,stroke-width:2px,color:white,font-weight:bold,rx:5,ry:5;
  classDef pre fill:#0f172a,stroke:#3b82f6,color:#94a3b8,rx:5,ry:5;
  classDef child fill:#0f172a,stroke:#10b981,color:#94a3b8,rx:5,ry:5;
  classDef related fill:#0f172a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#94a3b8,rx:5,ry:5;
  linkStyle default stroke:#4b5563,stroke-width:2px;

      

🧒 Explícalo como si tuviera 5 años

Piensa en [JavaScript](/es/terms/javascript) como un chef que solo puede hacer una cosa a la vez. Si necesita hornear un pastel (una tarea larga), no se queda ahí parado esperando. Pone el pastel en el horno y pone un temporizador, y luego inmediatamente comienza a preparar una ensalada (otra tarea). Cuando suena el temporizador del horno, el chef termina la ensalada, saca el pastel y luego pasa a otra cosa. El bucle de eventos es como el sistema del chef para gestionar estas tareas de 'espera', asegurando que se manejen cuando están listas sin detener el otro trabajo.

🤓 Expert Deep Dive

El bucle de eventos de JavaScript es un modelo de concurrencia que orquesta la ejecución de código, tareas y eventos. Monitoriza continuamente la pila de llamadas y la(s) cola(s) de tareas. El código síncrono se ejecuta directamente en la pila de llamadas. Las operaciones asíncronas (por ejemplo, setTimeout, Promises, I/O) se transfieren a las API del entorno anfitrión, que gestionan su ejecución. Una vez que una operación asíncrona se completa, su callback (o el manejador de resolución de una Promise) se coloca en una cola correspondiente: la cola de tareas (para macrotareas como setTimeout, eventos DOM) o la cola de microtareas (para microtareas como Promises, queueMicrotask). La función principal del bucle de eventos es, cuando la pila de llamadas está vacía, sacar tareas de la cola y ejecutarlas. Las microtareas generalmente se procesan antes que las macrotareas. Específicamente, después de que la macrotarea actual finaliza y antes de que comience la siguiente, el bucle de eventos ejecutará todas las microtareas disponibles. Esto prioriza los callbacks inmediatos (como las resoluciones de Promise) sobre los diferidos, asegurando la capacidad de respuesta y el manejo eficiente de las operaciones asíncronas en diferentes entornos JavaScript.

🔗 Términos relacionados

Requisitos previos:

📚 Fuentes