JavaScript executes the current synchronous task on one main call stack.
PaXa Labs / 16 · Interactive
Event Loop
Visualiser
Watch JavaScript tasks move through the call stack, async operations and queues one meaningful step at a time.
Fully client-side · Controlled scenarios · No eval()ScenarioPromise vs setTimeout
Microtasks drain before eligible timer callbacks.
Expected output
A → D → C → BReady
Controlled example
JavaScriptSource Code
01console.log("A");02 03setTimeout(() => {04 console.log("B");05}, 0);06 07Promise.resolve().then(() => {08 console.log("C");09});10 11console.log("D");Current pathCode → ready
Stack0
Async0
Microtasks0
Timers0
LIFO · main thread
0Call Stack
Stack is empty
Timer registration
0Async Operations
No operation waiting
Promises · await
0Microtask Queue
No pending microtask
Eligible callbacks
0Timer Queue
No eligible timer
Event LoopWaiting to run
It only moves eligible work when the call stack is empty.
Observed order
0Console Output
Output appears here as each log statement executes.
Current step0 / 28
Ready. Run the scenario or advance one meaningful step at a time.
Readable sequence
0Execution Log
Run or step through the scenario to build the log.
Illustrative, not profiling data
SIMSimulation Timeline
Simulated timing appears as the execution advances.
What is the event loop?
One stack, several places to wait.
Async operations register callbacks that become eligible for later execution.
When the stack clears, Promise and await microtasks are generally drained before timer callbacks.
Accuracy note: setTimeout(fn, 0) does not execute immediately. Its callback becomes eligible after the delay and still waits for the stack and pending microtasks. This visualiser uses a simplified educational model and does not run arbitrary JavaScript.