JavaScript事件循環（Event Loop）的深入理解

一、什麼是事件循環

JavaScript是一種單線程的編程語言，即一次只能執行一個任務。然而，Web應用程序通常需要同時處理多個任務，例如用戶交互、HTTP請求、定時器事件等。事件循環是一種機制，用於處理JavaScript中的非同步代碼，以便在一個任務完成後繼續下一個任務。

事件循環由一個主線程和一個任務隊列組成。主線程負責執行同步代碼和處理任務隊列中的非同步代碼。任務隊列用於存放非同步操作的回調任務，在主線程空閑時執行這些任務。

二、任務隊列的分類

在JavaScript中，任務隊列由兩個部分組成：宏任務和微任務。

1. 宏任務（Macro Task）

宏任務通常是由JavaScript引擎排隊執行的，比如：定時器回調、IO操作、UI渲染等。每一次循環中，宏任務隊列中只會有一個任務被執行，其餘任務等待下一次循環。

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

console.log('sync');

輸出結果：

sync
timeout

執行順序：同步代碼 –> 宏任務（setTimeout）

2. 微任務（Micro Task）

微任務通常是由當前執行的任務在執行完後立即執行的，比如：Promise回調、async/await等。微任務隊列會在每次主線程任務執行和下一次事件循環開始之間被清空。

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

console.log('sync');

輸出結果：

sync
then 1
then 2

執行順序：同步代碼 –> 微任務（Promise.then） –> 微任務（Promise.then）

三、事件循環的執行順序

JavaScript運行時，線程從任務隊列中獲取任務並執行，完成後再次進入任務隊列執行下一個任務。這個過程不斷重複，形成了事件循環。事件循環遵循以下規則：

1. 執行同步代碼

首先會執行所有的同步代碼，直到主線程變為空閑狀態。

console.log('step 1');

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

console.log('step 2');

輸出結果：

step 1
step 2
timeout

2. 執行微任務隊列中的任務

如果任務隊列中同時存在微任務和宏任務，則先執行微任務隊列中的所有任務，直到微任務隊列為空。

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

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

輸出結果：

then 1
then 2
timeout

3. 執行宏任務隊列中的任務

如果當前宏任務執行完成後，仍有未執行的宏任務，則繼續執行宏任務隊列中的第一個任務。

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

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

輸出結果：

timeout 1
timeout 2
then

四、使用Promise解決回調地獄

回調地獄是使用回調函數處理非同步操作時容易遇到的問題，代碼很難維護和擴展。Promise是一種可靠的解決方案，可以簡化代碼和優化性能。

function fetchData(callback) {
  setTimeout(() => {
    callback('data');
  }, 1000);
}

fetchData((data1) => {
  console.log(data1);
  fetchData((data2) => {
    console.log(data2);
    fetchData((data3) => {
      console.log(data3);
    });
  });
});

使用Promise重寫：

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('data');
    }, 1000);
  });
}

fetchData().then((data1) => {
  console.log(data1);
  return fetchData();
}).then((data2) => {
  console.log(data2);
  return fetchData();
}).then((data3) => {
  console.log(data3);
});

五、結語

通過深入了解事件循環機制，可以更好地理解JavaScript的執行過程，並且編寫更高效和可靠的代碼。本文只是事件循環的簡單介紹，如果你想要更深入地學習，可以查看官方文檔或者相關書籍。