JavaScript Event Loop Simulator

Code

      

      

    

    

      

        
        Console output
        — what the user sees, in order
      

      

    

  


  
  

    

      

        
        Call Stack
        — LIFO · runs one frame at a time (single-threaded)
      

      

    


    

      

        
        Web APIs
        — browser handles timers, fetch, DOM events off-thread
      

      

    


    

      

      

        
Event Loop

        
Idle — waiting for the call stack to empty.

      

    


    

    

      

        
        Microtask Queue
        — Promises, await, queueMicrotask · drained FULLY first
      

      

    


    

      

        
        Task Queue (Macrotasks)
        — setTimeout, events, fetch callbacks · ONE per loop tick
      

      

    

  


  
  

    
    Pick an example and press Step › to walk through it one move at a time, or ▶ Play to watch it run.
  






   Call Stack
   Web API
   Microtask
   nextTick (Node)
   Macrotask
   Event Loop



The golden rule: the Event Loop only moves a queued callback onto the Call Stack when the stack is empty — and it empties the entire Microtask Queue before taking the next single Macrotask.