JavaScript 事件循環

什麼是 JavaScript 事件循環？

在 JavaScript 中，事件循環是一種使用非阻塞 I/O 控製程式碼、事件或訊息執行的機制。這提供了一種在 JavaScript 中進行非阻塞或非同步操作的方法。

關鍵概念

1.單線
JavaScript 是單線程的，這意味著它一次執行一項任務。單線程，因此，JavaScript 執行的一個線程就是所謂的「主線程」。

2.呼叫堆疊
它是 JavaScript 追蹤函數呼叫的資料結構。函數呼叫被壓入堆疊。當它返回時，它被刪除。當它為空時，JavaScript 就準備好要處理下一步了。它通常也被稱為“主線程”。

3.堆
這是 JavaScript 儲存物件和變數的地方。它用於動態記憶體分配。

4.事件隊列
等待執行的訊息或任務佇列。當任務被加入到佇列中時，它會等待呼叫堆疊為空才能執行。

5.事件循環
它是不斷監視呼叫堆疊和事件佇列的東西。如果呼叫堆疊為空，則會將任務從事件佇列移至呼叫堆疊並執行它們。

流程

• 程式碼的執行：當JavaScript開始執行程式碼時，它將函數呼叫推送到呼叫堆疊上。此外，它還執行一個又一個函數。
• 非同步操作：立即操作是非同步的，例如 setTimeout 或網路請求，JavaScript 不會阻止執行。相反，它將該操作轉送給 Web API，例如瀏覽器的計時器或處理 HTTP 請求的服務。

• 回呼函數：當非同步操作完成時，其回呼函數會被推入事件佇列。

• 事件循環檢查：事件循環現在會依序檢查呼叫堆疊以及事件佇列。如果呼叫堆疊為空，它會從事件佇列中選擇第一個任務並將其推入呼叫堆疊來運行它。
  

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 1000);

setTimeout(() => {
  console.log('Timeout 2');
}, 500);

console.log('End');

請注意，以下步驟將逐步發生：

• 由於啟動是同步操作，因此會立即記錄。
• 第一個 setTimeout 以 1000 毫秒的延遲註冊，然後前往 Web API。它的回調將在 1000ms 後放入事件佇列中。
• 第二個 setTimeout 以 500 毫秒的延遲註冊，然後前往 Web API。它的回調將在 500ms 後放入事件佇列中。
• 結束會立即記錄，因為它是同步的。
• 在 500 毫秒內，第二個 setTimeout 的回呼從事件佇列移至呼叫堆疊並記錄 Timeout 2。
• setTimeout 的第一個速率在 1000ms 內從事件佇列到呼叫堆疊並記錄 Timeout 1。

總結

• 呼叫堆疊：依序執行函數。
• 事件佇列：儲存要執行的訊息或任務。
• 事件循環：它執行任務，當事件佇列為空時，這些任務將從事件佇列傳遞到呼叫堆疊。

以上是JavaScript 事件循環的詳細內容。更多資訊請關注PHP中文網其他相關文章！