JavaScript 事件循環機制：斷點調試時遇到 onstorage 監聽會發生什麼？

核心概念：單線程與事件循環

JavaScript 引擎採用單線程模型，所有任務（包括同步代碼、異步回調、事件監聽器）都在同一條線程中按順序處理。當你在開發者工具中設置斷點、暫停執行時，主線程被阻塞，但這並不代表瀏覽器停止了事件檢測。

場景重現：斷點暫停期間觸發 onstorage

// 假設當前正在執行這段代碼，且斷點停在 console.log 之前
function debugPrint() {
  doSomething(); // 斷點在此處暫停
  console.log('打印語句'); // 尚未執行
}
debugPrint();

// 此時另一個標籤頁修改了 localStorage
window.addEventListener('storage', (e) => {
  console.log('onstorage 觸發', e.key);
});

執行順序解析

1. 同步代碼優先：主線程正在執行 debugPrint，斷點導致線程暫停，console.log 尚未執行。
2. 異步事件入隊：storage 事件發生時，瀏覽器將回調函數放入任務隊列（宏任務隊列）。
3. 斷點釋放後：當你繼續執行（F8），主線程先完成當前同步代碼（執行 console.log），然後從任務隊列取出 onstorage 回調執行。

結論：onstorage 不會「插隊」打斷正在執行的同步代碼。它會等待當前調用棧清空、微任務執行完畢後，才在下一輪事件循環中執行。

關鍵點總結

• JS 單線程指「同一時間只能做一件事」，但瀏覽器有多線程（渲染、網絡、定時器、事件監聽）負責偵測並將回調推入隊列。
• 斷點調試只是阻塞主線程執行 JS，不影響瀏覽器其他線程工作。
• 事件循環順序：同步代碼 → 微任務 → 宏任務（如 storage, setTimeout, click 等）。

最佳實踐：調試異步代碼時，善用 async/await 或 Promise 鏈，避免在回調地獄中設置難以追蹤的斷點。