JavaScript event loop จัดการงาน async อย่างไร

Question

Accepted Answer

JavaScript ทำงานบน **thread เดียว** ดังนั้นจึงทำได้เพียงสิ่งเดียวในแต่ละครั้ง **Event loop** คือสิ่งที่ช่วยให้จัดการงาน async โดยไม่ยุ่งเหยิง: มันรันcall stack และเมื่อ stack ว่าง มันจะดึง callbacks จากqueues

มี queues สองอัน โดยมีลำดับความสำคัญต่างกัน:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask` ว่าง **ทั้งหมด** หลังจากแต่ละ task ก่อนการ render
- **Macrotasks**: `setTimeout`, I/O, UI events ประมวลผลหนึ่งรายการต่อการวนซ้ำ loop

```js
console.log("1");                         // sync
setTimeout(() => console.log("2"), 0);    // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4");                         // sync
// Output: 1, 4, 3, 2
```

## เหตุใดจึงมีลำดับนั้น

1. โค้ด synchronous ทำงานก่อนอื่น: `1`, `4`
2. Stack ว่าง → ว่างสุด **microtasks ทั้งหมด**: `3`
3. จากนั้นใช้ **macrotask หนึ่งรายการ**: `2`

นี่คือเหตุผลที่ `Promise.then` เสมอทำงาน **ก่อน** `setTimeout(…, 0)` แม้ว่าทั้งสองเป็น "async" — microtasks มีความสำคัญ

## ผลที่เป็นประโยชน์จริง

```js
// ❌ blocks the single thread — UI freezes for 5 seconds
while (Date.now() - start < 5000) {}
```

งาน synchronous ที่นาน ยุ่งเหยิงทุกอย่าง (rendering, clicks) เลื่อนงาน CPU หนักไปยัง **Web Worker** (thread แยกจริง)

## เหตุใดจึงสำคัญ

การเข้าใจ loop อธิบายลำดับ async ว่าทำไม promises resolve ก่อน timers และทำไมจึงไม่ควรบล็อก main thread — แบบจำลองจิตใจหลักสำหรับ async JavaScript ทั้งหมด