Skip ›
Kashii
Updatez
Daily Student Opportunities · Campus Drives · Python Kashi
Assembling today's opportunities...
The JavaScript Event Loop Explained: Microtasks, Macrotasks and Execution Contexts
A visual step-by-step breakdown of how single-threaded JavaScript handles asynchronous operations, Promise microtask queues, setTimeout timers, and UI render ticks.
## Single-Threaded Non-Blocking Concurrency
JavaScript is single-threaded: it has exactly **one Call Stack** and executes one statement at a time. Yet, web applications handle thousands of concurrent network requests, UI clicks, and animations seamlessly.
This magic is powered by the **Event Loop** operating in coordination with browser Web APIs / Node.js libuv:
```text
[ Synchronous Call Stack ] ────▶ (Runs statements to completion)
│
▼ (Stack Empty)
[ Microtask Queue ] ───────────▶ (Promise.then, queueMicrotask, MutationObserver)
│ * Drained COMPLETELY before moving on!
▼
[ Animation Frame Queue ] ─────▶ (requestAnimationFrame, UI Layout Repaint)
│
▼
[ Macrotask Queue (Task) ] ────▶ (setTimeout, setInterval, I/O, setImmediate)
* Executes ONE single macrotask per tick!
```
👏
76 Claps
👁️ 311 views
•
🔗 Share Story
More from JavaScript & Engines