Event Loop Visualizer
Simple visualization of the JavaScript event loop showing how callbacks, promises, and microtasks are processed.
Code Example
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');Event Loop Visualization
Call Stack
Web APIs
Callback Queue
Microtask Queue
Console Output
About the Event Loop
JavaScript's event loop is responsible for executing code, collecting and processing events, and executing queued sub-tasks. The event loop continuously checks:
- Call Stack - Functions currently being executed
- Microtask Queue - Promises and other microtasks (processed first)
- Callback Queue - setTimeout, setInterval callbacks (processed after microtasks)
This visualization demonstrates the order of execution in the event loop.