Dev
前端技術、踩坑紀錄與學習筆記
83 篇2026-05-1813 分鐘閱讀
說明 Promise 的錯誤處理機制：透過 `[[RejectReactions]]` 與 `.catch()` 統一管理失敗情境。並介紹 2022 年新增的 `AbortSignal.timeout()`，示範如何為 `fetch` 加上超時自動中止的能力。最後整理 Microtask Queue、Callback Queue 與 Event Loop 的完整執行規則。
2026-05-1712 分鐘閱讀
說明 JavaScript 非同步系統中存在兩個佇列：Callback Queue 與 Microtask Queue。透過同時混用 `setTimeout` 與 `fetch` 的程式碼，逐步追蹤執行時間軸，說明 Event Loop 為何永遠優先清空 Microtask Queue，以及這個規則如何決定最終的輸出順序。
2026-05-1712 分鐘閱讀
逐步追蹤同時包含 `setTimeout` 與 `fetch` 的程式碼執行流程，說明 Callback Queue 與 Promise 回呼機制如何在同一段程式碼中並行運作，並以此引出一個關鍵問題：當兩者同時就緒，究竟誰先執行？
2026-05-1612 分鐘閱讀
說明 `fetch` 建立的 Promise 物件如何跨越 JavaScript 引擎與瀏覽器兩個環境：瀏覽器的網路請求持有指向 Promise 物件的記憶體參照，背景工作完成時透過這個參照直接更新 `[[Result]]`。同時說明 Promise 物件為何不會在局部執行環境退出後消失，以及為何 Promise 回呼使用的不是 Callback Queue，而是優先權更高的 Microtask Queue。
2026-05-1613 分鐘閱讀
說明 `fetch` 作為雙管齊下的幻象函式的運作方式：呼叫當下同時在瀏覽器背景發出 HTTP 請求，並立刻在 JavaScript 中回傳 Promise 物件。介紹 Promise 的 `[[Result]]` 與 `[[FulfillReactions]]` 兩個隱藏屬性，以及 `.then()` 的作用，並逐步追蹤從發出請求到資料回傳的完整執行流程。
2026-05-1511 分鐘閱讀
整理 ES5 callback 模式的三個侷限：無法在 JavaScript 內追蹤背景工作狀態、回應資料僅存在於 callback 內部、流程不直觀。並介紹 ES6 的 `fetch` 作為雙管齊下的幻象函式，如何同時發起背景工作並立即回傳 Promise 物件，解決上述問題。
2026-05-1514 分鐘閱讀
說明 Event Loop 的運作原理：它持續檢查 Call Stack 是否清空、全域程式碼是否執行完畢、Callback Queue 是否有待執行的函式，並在三個條件同時成立後才將回呼送上 Call Stack。同時整理 JavaScript 非同步執行模型的完整架構，包含 JavaScript 引擎、Web Browser APIs、Callback Queue 與 Event Loop 之間的分工。
2026-05-1413 分鐘閱讀
說明 Callback Queue（Task Queue）的運作機制與嚴格的執行條件：來自 Web Browser APIs 的回呼函式不會直接回到 Call Stack，而是進入佇列等候，直到所有全域程式碼執行完畢後才能執行。並以 `setTimeout(fn, 0)` 搭配同步阻塞函式的範例，逐步拆解實際的輸出順序。
2026-05-1412 分鐘閱讀
逐步拆解 `setTimeout` 在 JavaScript 引擎與瀏覽器之間的實際分工：說明 Facade Function 如何將計時工作外包給瀏覽器 Timer API，以及為何主執行緒不會等待計時完成，進而解釋非直覺的輸出順序。
JavaScript Hard Parts v3
#JavaScript #CallbackFunction #WebAPI #frontendMasters #javaScriptTheHardPartsV3 2026-05-1314 分鐘閱讀
說明 JavaScript 單執行緒同步執行模型的限制，以及耗時任務如何造成阻塞問題。介紹瀏覽器提供的 Web APIs（`setTimeout`、`fetch` 等）本質上是 Facade Functions，並預告 Event Loop 與 Callback Queue 的排程機制。
MIT Licensed | Copyright © 2025-present Wen-Hsiu's Blog