JavaScript Event Loop Visualizer

Visualize the call stack, callback queue, and event loop with step-by-step execution

Overview

The JavaScript Event Loop Visualizer provides an interactive way to understand how JavaScript’s event loop works. Watch code execute step-by-step, see the call stack push and pop functions in real-time, observe async operations move through Web APIs, and understand how the callback queue and microtask queue interact with the event loop.

Tips

  1. Start with Built-in Examples: Use the provided code examples to see common patterns like setTimeout vs Promises, then modify them to experiment with different execution orders and understand how the event loop processes each type of async operation.

  2. Watch the Microtask Queue: Pay close attention to how Promise callbacks execute before setTimeout callbacks, even when setTimeout has a delay of 0. This demonstrates that microtasks always have priority over macrotasks in the event loop.

  3. Step Through Slowly: Use the step-by-step execution mode and slow speed settings to carefully observe how functions push onto and pop off the call stack, and how async operations move from Web APIs to the callback queue.

  4. Test Your Own Code: Paste your actual async JavaScript code to visualize execution order and debug timing issues. This is especially helpful when dealing with complex Promise chains or nested async operations.

  5. Understand setTimeout(fn, 0): Experiment with setTimeout at 0ms delay to see that it doesn’t execute immediately - it still goes through the callback queue and waits for the call stack to clear and all microtasks to complete first.