Call stack, microtasks, timers
JavaScript Event Loop Visualizer
Visualize how JavaScript moves from synchronous code to microtasks, timers, runtime callbacks, output, memory, and blocked work.
The event loop only moves queued work forward when the call stack is clear, and microtasks usually drain before timer callbacks.
What the visualizer shows
The page highlights the current code line, call stack, queues, console output, waiting runtime work, blocked time, and explanation for the active step.
Why it matters
Most confusing async bugs are ordering bugs. A visual timeline helps users see what waits, what runs now, and what cannot run until later.
Best first case
Start with Promise before setTimeout, then move into blocking loops, nested timers, and microtask floods.
Practice this topic
Start with the strongest case, then continue through related examples.
Promise before timeout
Microtasks run before timers after the stack clears.
Sync execution
Most setup code, imports, and simple calculations behave this way.
microtask flood
Long microtask chains can delay rendering, timers, and input responsiveness.
Multiple timers
Timer order matters in tests, retries, and UI scheduling.