JavaScript 事件循環：同步 vs 非同步

簡介

在 JavaScript 中，同步與非同步的執行方式直接影響程式的效能與使用者體驗。
同步程式碼會一行接一行、阻塞（blocking）執行；若某段程式需要等待 I/O（例如讀取檔案、發送網路請求），整個執行緒都會被卡住，導致 UI 變卡或伺服器無法即時回應。

相對地，非同步機制讓耗時的操作可以在背景完成，主執行緒得以繼續處理其他工作，這正是 事件循環（Event Loop） 發揮威力的地方。了解同步與非同步的差異、背後原理以及正確的使用方式，是成為可靠 JavaScript 開發者的必備功課。

核心概念

1. 同步執行（Blocking）

定義：程式碼按照寫入順序逐行執行，前一行必須完成才能執行下一行。
特性：簡單直觀，但當遇到需要等待外部資源的操作時，整個執行環境會被「卡住」。

範例 1：簡單的同步迴圈

// 計算 1~5 的總和
let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum += i;          // 每次迴圈都必須等待前一次完成
}
console.log('總和 =', sum);

這段程式碼在所有迴圈結束前，console.log 不會被呼叫，執行流程完全同步。

2. 非同步執行（Non‑Blocking）

定義：耗時的工作會交給瀏覽器或 Node.js 的 工作執行緒（Worker Thread）、I/O 線程 或 計時器，主執行緒在任務完成前繼續往下跑。
機制：當非同步任務完成時，會把回呼函式（callback）、Promise 或 async/await 的後續程式碼放入 任務佇列（task queue），等到呼叫堆疊（call stack）清空後，由事件循環取出執行。

範例 2：使用 `setTimeout` 的非同步呼叫

console.log('A');               // 同步執行

setTimeout(() => {
  console.log('B');             // 0ms 後放入 task queue
}, 0);

console.log('C');               // 同步執行

輸出結果：

A
C
B

雖然 setTimeout 的延遲時間是 0，仍然會被推到任務佇列，等到同步程式碼全部跑完才會執行。

3. Promise 與 async/await

Promise 為非同步操作提供**可鏈結（chainable）**的介面；async/await 則是語法糖，使非同步程式碼看起來像同步。

範例 3：Promise 版的 HTTP 請求（Node.js / 瀏覽器皆可）

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) resolve(xhr.responseText);
      else reject(new Error(xhr.statusText));
    };
    xhr.onerror = () => reject(new Error('Network error'));
    xhr.send();
  });
}

// 使用 Promise
fetchData('https://api.example.com/data')
  .then(data => console.log('取得資料：', data))
  .catch(err => console.error('錯誤：', err));

範例 4：async/await 版（更易讀）

async function loadData() {
  try {
    const data = await fetchData('https://api.example.com/data');
    console.log('取得資料：', data);
  } catch (err) {
    console.error('錯誤：', err);
  }
}
loadData();

await 會暫停 async 函式 的執行，但不會阻塞整個執行緒；底層仍然是透過 Promise 與事件循環完成。

4. 事件循環的運作流程

呼叫堆疊（Call Stack）：存放同步執行的函式與程式碼。
任務佇列（Task Queue）：放入已完成的非同步回呼（macro‑task），如 setTimeout、I/O 完成事件。
微任務佇列（Microtask Queue）：存放 Promise 的 then/catch/finally 回呼及 queueMicrotask。微任務的優先級高於宏任務。
事件循環（Event Loop）：
- 若呼叫堆疊為空，先執行所有微任務；
- 再從任務佇列取出最早的宏任務執行；
- 重複此過程。

範例 5：微任務 vs 宏任務的執行順序

console.log('1️⃣ 同步開始');

setTimeout(() => console.log('2️⃣ setTimeout (macro)'), 0);
Promise.resolve().then(() => console.log('3️⃣ Promise (micro)'));

console.log('4️⃣ 同步結束');