./prontouso.com

HERRAMIENTAS DE DESARROLLO

Simulador del Event Loop de JavaScript

Arma una secuencia o pega instrucciones JavaScript compatibles para modelar código síncrono, microtasks, timers, callbacks de animación y nextTick de Node.js paso a paso.

Estado de la herramientaSe ejecuta en tu navegador
Vista previa
~/js/simulador-event-loop
SIMULADOREVENT LOOP EN VIVO
Escenarios Comunes & Preajustes

Pregunta clásica de entrevista: console.log síncrono, setTimeout(0), Promise.then y log final.

Script (En Orden del Código)

Modelo interactivo paso a paso de Call Stack, Cola de Microtasks, Cola de Tareas, callbacks de animación y nextTick de Node.js.

ms
Total de Pasos
4
Llamadas Síncronas
2
Microtasks
1
Macrotasks
1
Ciclos del Bucle
2
Ciclo 1Instantánea 1 de 12
Fase del Event Loop & Regla del Modelo

Evaluando el script síncrono principal en la Call Stack.

Call Stack / Pila de Llamadas (LIFO)1
<main script>STACK
Cola de Microtasks / Job Queue (FIFO)0
(No hay microtasks pendientes)
Cola de Tareas / Macrotasks (FIFO)0
(No hay macrotasks pendientes)
Web APIs & Temporizadores0
(No hay temporizadores activos)
Salida de Consola
(Aún no hay logs impresos)

Cómo funciona

  1. Ingresa tus datos

    Completa los valores, pega el texto o sube el archivo que necesita esta herramienta.

  2. Obtén el resultado al instante

    La mayoría de las herramientas se actualizan mientras escribes; algunas usan un solo botón. De cualquier forma, el resultado aparece aquí mismo.

  3. Usa tu resultado

    Copia, descarga o comparte lo que genere la herramienta — el control siempre es tuyo.

Privacidad y procesamiento — Se ejecuta localmente en tu navegador. Esta herramienta no sube tu entrada a ningún servidor.

¿Qué es Simulador del Event Loop de JavaScript?

El Simulador del Event Loop de JavaScript modela el orden de instrucciones síncronas, trabajos de Promise y queueMicrotask, callbacks de setTimeout, requestAnimationFrame y process.nextTick de Node.js sin ejecutar el código.

ENTIENDE LA HERRAMIENTA

Cómo funciona el simulador del event loop de JavaScript

Elige un preajuste, arma una secuencia o escribe instrucciones JavaScript compatibles para inspeccionar paso a paso un modelo determinista de la pila y las colas de tareas.

Las reglas de orden representadas por el modelo

  • Todo el código síncrono se ejecuta primero, de arriba hacia abajo.
  • En el ejemplo de Node.js, los callbacks de process.nextTick se ejecutan antes que la cola normal de Promise y queueMicrotask.
  • Los callbacks de Promise .then y queueMicrotask se vacían antes del siguiente callback de temporizador en este modelo.
  • Los temporizadores se ordenan por el retraso introducido y conservan el orden del código cuando empatan; el preajuste de animación también muestra la fase separada previa al renderizado que usa el modelo.

Cómo usarlo

  • Empieza con un preajuste o agrega instrucciones en el Constructor Visual y elige el tipo de tarea de cada una.
  • Define un retraso no negativo en milisegundos para tareas setTimeout y agrega trabajo anidado cuando un callback programa otra instrucción.
  • Usa los controles de reproducción y la vista de colas para seguir los estados, o abre la tabla para ver el orden final modelado.
  • Copia el JavaScript normalizado, la salida simulada o el rastreo completo para comparar el resultado en otro lugar.

Lo que el simulador simplifica a propósito

El editor reconoce los patrones de instrucciones compatibles y los convierte en etiquetas de un modelo local de orden. No ejecuta JavaScript arbitrario, resuelve variables, hace solicitudes de red ni reproduce excepciones y valores de retorno.

Los retrasos de los temporizadores establecen un orden relativo determinista en vez de simular tiempo real. requestAnimationFrame depende de las oportunidades de renderizado de un navegador, y process.nextTick pertenece a Node.js; por eso esos preajustes explican conceptos de runtimes separados, no una cronología universal.

Ejemplo clásico de orden

sync, timeout, promise, sync

Los logs síncronos corren primero, luego la microtask de la promise, después la macrotask del timeout.

log(1); setTimeout(2); Promise.then(3); log(4) -> 1, 4, 3, 2

Modelo local, sin ejecución de código

Las instrucciones y etiquetas permanecen en la memoria del navegador para esta página. La herramienta no las sube, almacena ni ejecuta como JavaScript; solo las interacciones agregadas pueden contarse mediante analítica basada en consentimiento.

Preguntas frecuentes

¿Por qué el callback de la Promise corre antes que setTimeout(fn, 0)?

Porque el punto de control de microtasks vacía los callbacks de Promise encolados antes de que el event loop elija la siguiente tarea de temporizador. Un retraso de 0 ms hace que el timer sea elegible; no interrumpe la tarea actual ni sus microtasks.

¿Esto cubre async/await?

Sí, como una continuación modelada: el preajuste de async/await y las líneas compatibles que contienen await representan el trabajo posterior al await como microtask. La herramienta no ejecuta la función asíncrona ni resuelve su valor.

¿Esto reproduce todos los detalles temporales de navegadores y Node.js?

No. El orden principal del código síncrono y los puntos de control de microtasks está representado, pero los tiempos de timers, las oportunidades de renderizado y las fases de Node.js incluyen detalles fuera de este modelo determinista. Lee los preajustes de rAF y process.nextTick como ejemplos separados de navegador y Node.js.

¿Cómo se ordenan macrotasks con el mismo retraso?

El simulador ordena macrotasks por retraso y mantiene el orden original en empates, siguiendo la ordenación estable usada en el modelo.

¿El Editor de Código JS ejecuta el código que pego?

No. Reconoce patrones compatibles de console.log, setTimeout, Promise/.then, queueMicrotask, requestAnimationFrame, process.nextTick y await y los convierte en pasos del modelo. El JavaScript no reconocido se trata como etiqueta, no se ejecuta.

Herramientas relacionadas