JavaScript Event Loop Visualizer

Watch code execution flow through the call stack, callback queue, and event loop

Example Code Patterns

Custom Code

Execution Controls

Ready
1000ms

Visualization

Call Stack

Empty

Web APIs

No active timers

Callback Queue

Empty

Code Execution


            

        


        

            
Console Output

            

                
// Console output will appear here

            

        


        

            
Help

            

                How the Event Loop Works
                
The JavaScript event loop is a mechanism that handles asynchronous operations:

                
    
                    
  1. Call Stack: Executes functions in LIFO order (Last In, First Out)
    2. 
                    
  2. Web APIs: Handle async operations like setTimeout, fetch, etc.
    3. 
                    
  3. Callback Queue: Stores callbacks ready to execute
    4. 
                    
  4. Event Loop: Moves callbacks from queue to stack when stack is empty
    5. 
                

                
The event loop continuously checks: if the call stack is empty, it pushes the first callback from the queue onto the stack.

            

            

                Microtasks vs Macrotasks
                
Microtasks (higher priority):

                
    
                    
  • Promise callbacks (.then, .catch, .finally)
    • 
                    
  • queueMicrotask()
    • 
                    
  • MutationObserver
    • 
                

                
Macrotasks (regular queue):

                
    
                    
  • setTimeout, setInterval
    • 
                    
  • setImmediate (Node.js)
    • 
                    
  • I/O operations
    • 
                

                
All microtasks execute before the next macrotask!

            

            

                Understanding setTimeout(fn, 0)
                
A common misconception is that setTimeout(fn, 0) executes immediately.

                
Reality: It schedules the callback to run after:

                
    
                    
  1. All current synchronous code completes
    2. 
                    
  2. All microtasks (Promises) complete
    3. 
                    
  3. The event loop moves it from queue to stack
    4. 
                

                
This is why console.log runs before setTimeout callbacks even with 0ms delay!

            

            

                Using This Visualizer
                
    
                    
  • Choose Example: Click an example button to load pre-made code
    • 
                    
  • Start: Click "Start" to auto-execute step by step
    • 
                    
  • Step: Use "Step" button to manually control execution
    • 
                    
  • Speed: Adjust slider to control auto-execution speed
    • 
                    
  • Watch: Observe items moving between stack, APIs, and queue
    • 
                    
  • Console: See output as code executes
    • 
                    
  • Custom: Write your own code to visualize
    •