首頁 > web前端 > js教程 > 主體

為什麼 JavaScript 永不休眠:事件循環簡單指南

Patricia Arquette
發布: 2024-10-30 03:24:03
原創
605 人瀏覽過

JavaScript 作為一種單執行緒語言: 簡單提及 JavaScript 如何一次只處理一項任務,但事件循環卻讓它看起來並非如此

事件循環如何運作:事件循環過程中的關鍵步驟

  • 堆疊: 呼叫堆疊管理同步程式碼。

  • 佇列:回呼佇列保存等待執行的任務。

  • 循環: 事件循環在
    之前檢查堆疊是否為空 將任務從佇列移動到堆疊。

Why JavaScript Never Sleeps: An Easy Guide to the Event Loop

工作流程細分:

初始程式碼執行:

console.log('Hi');
$.get('url', function cb(data) {
  console.log(data);
});
console.log('JSConfEU');

登入後複製
  • 當此程式碼開始執行時,console.log('Hi') 會加入到呼叫堆疊中,並在控制台中列印「Hi」。

非同步函數呼叫($.get):

  • 接下來,遇到 $.get('url', function cb(data) { ... }) 。此函數發起 HTTP 請求以從「url」檢索資料。

  • 請求不會阻塞主線程,而是傳送到 Web API 環境(通常是瀏覽器的一部分)。

  • 回呼函數(cb)被註冊為在HTTP請求完成後執行,但它不會立即執行。 HTTP 請求繼續在 Web API 部分加載,標記為 XHR (XMLHttpRequest),這通常用於處理網路請求。

移動到下一個同步行:

  • javaScript 移至下一行 console.log('JSConfEU'),該行已加入到呼叫堆疊中。然後“JSConfEU”被印到控制台。

事件循環與任務佇列:

  • 完成所有同步程式碼後,呼叫堆疊變空,JavaScript 等待任何非同步任務完成。

  • HTTP 要求完成後,回呼函數 (cb) 將從 Web API 移至任務佇列。

  • 事件循環不斷檢查呼叫堆疊是否為空,當為空時,事件循環將任務從任務佇列移到呼叫堆疊

回呼執行:

  • 當事件循環將回呼函數放入呼叫堆疊時,它會執行console.log(data);在回呼函數中,將從 HTTP 請求接收到的資料列印到控制台。

摘要:

此流程示範了事件循環如何處理非同步程式碼
作者:

  • 立即在呼叫堆疊上處理同步程式碼。

  • 處理 Web API 中的非同步任務,完成後將它們移至任務佇列。

  • 允許事件循環僅在呼叫堆疊為空時將任務移至呼叫堆疊,確保非阻塞程式碼執行。

以上是為什麼 JavaScript 永不休眠:事件循環簡單指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!