布魯斯前端JS面試題目 - 事件循環與非同步操作

（一）什麼是事件循環（Event Loop）？

解答：

1. 微任務與宏任務：

   JavaScript 是單線程語言，一次只能做一件事。為了處理非同步，JavaScript 將任務分為兩類：

   • Microtask（微任務）： 比如 Promise.then、queueMicrotask、MutationObserver
   • Macrotask（宏任務）： 比如 setTimeout、setInterval、MessageChannel、Node.js 中的 setImmediate

   執行順序是「同步程式碼 → 所有 microtask → 一個 macrotask → 重複」

2. Node.js 與瀏覽器的差異：

   在瀏覽器中，每輪事件循環會先執行所有同步程式碼與 microtask，然後再從 macrotask queue 中取出一個執行。

   在 Node.js 中，事件循環分為六大階段：timers → pending callbacks → poll → check → close callbacks，每個階段結束都會先跑 process.nextTick 與 Promise 的 microtask。

   • process.nextTick：Node.js 專有，優先順序最高
   • Promise.then：屬於 microtask，優先於 macrotask
   • setImmediate：只存在於 Node.js，在 check 階段執行

（二）事件循環順序

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

解答：輸出A → D → C → B

• 1. 先執行同步程式碼，印出 A 和 D
• 2. setTimeout 是 macrotask，會被放到下一輪事件循環
• 3. Promise.then 是 microtask，會在同步程式碼後立即執行，印出 C
• 4. 最後才執行 setTimeout 的 callback，印出 B

（三）setTimeout vs setImmediate 的非同步行為

setTimeout(() => console.log('timeout'), 0);
setImmediate(() => console.log('immediate'));

解答：輸出順序不固定（可能是 timeout → immediate，也可能是 immediate → timeout）

• 解釋：這段程式碼沒有包在 I/O callback 裡，所以執行的先後順序無法保證，取決於執行環境與事件循環排程時機。
• setTimeout 在 timers 階段
• setImmediate 在 check 階段
• 因為這段程式碼沒有包在 I/O callback 裡，所以執行的先後順序無法保證，取決於執行環境與事件循環排程時機。

（四）nextTick vs Promise

process.nextTick(() => console.log('tick'));
Promise.resolve().then(() => console.log('promise'));
console.log('sync');

解答：輸出sync → tick → promise

• 1. 同步程式碼先執行，印出 sync
• 2. process.nextTick 優先於所有 microtask，印出 tick
• 3. Promise.then 是 microtask，最後執行並印出 promise

（五）Promise in setTimeout

setTimeout(() => {
  console.log('1');
  Promise.resolve().then(() => console.log('2'));
}, 0);

Promise.resolve().then(() => console.log('3'));
console.log('4');

解答：輸出4 → 3 → 1 → 2

• 1. 先執行同步程式碼，印出 4
• 2. Promise.then 是 microtask，立即執行並印出 3
• 3. setTimeout 是 macrotask，在下一輪事件循環執行，印出 1
• 4. setTimeout 內的 Promise.then 會在 setTimeout 執行完後立即執行，印出 2

（六）async/await 與事件循環

async function foo() {
  console.log('A');
  await Promise.resolve();
  console.log('B');
}

console.log('C');
foo();
console.log('D');

解答：輸出C → A → D → B

解析：async/await 會在 await 處中斷，將後續邏輯作為 microtask 進入 queue。

（七）setTimeout + Promise + async/await 混合執行順序

console.log('start');

setTimeout(() => {
  console.log('timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise');
});

(async () => {
  console.log('async1 start');
  await Promise.resolve();
  console.log('async1 end');
})();

console.log('end');

解答：輸出start → async1 start → end → promise → async1 end → timeout