国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺析 JS 中的 EventLoop 事件循環（新手向）

chadLi / 1308人閱讀

摘要：同時，如果執行的過程中發現其他函數，繼續入棧然后執行。上面我們討論的其實都是同步代碼，代碼在運行的時候只用調用棧解釋就可以了。

序

Event Loop 這個概念相信大家或多或少都了解過，但是有一次被一個小伙伴問到它具體的原理的時候，感覺自己只知道個大概印象，于是計劃著寫一篇文章，用輸出倒逼輸入，讓自己重新學習這個概念，同時也能幫助更多的人理解它~

概念

JavaScript 是一門 單線程 語言，即同一時間只能執行一個任務，即代碼執行是同步并且阻塞的。

eg. 這就像只有一個窗口的銀行，客戶需要一個一個排隊辦理業務。

只能同步執行肯定是有問題的，所以 JS 有了一個用來實現異步的函數：setTimeout

下面要講的 Event Loop 就是為了確保 異步代碼 可以在 同步代碼 執行后繼續執行的。

由于涉及到的相關概念較多，我們先從最簡單的來。

隊列（Queue）

隊列 是一種 FIFO(First In, First Out) 的數據結構，它的特點就是 先進先出

eg. 生活中最常見的例子就是排隊啦，排在隊伍最前面的人最先被提供服務。
棧（Stack）

棧 是一種 LIFO（Last In, First Out）的數據結構，特點即 后進先出。

eg. 大家都吃過桶裝薯片吧~薯片在包裝的時候只能從頂部放入，而吃的時候也只能從頂部拿出，這就叫后進先出哈
調用棧（Call Stack）

棧我們已經知道了，那么什么是 調用棧 呢 ？

它本質上當然還是個棧啦 廢話，關鍵在于它里面裝的東西，是一個個待執行的函數。

Event Loop 會一直檢查 Call Stack 中是否有函數需要執行，如果有，就從棧頂依次執行。同時，如果執行的過程中發現其他函數，繼續入棧然后執行。

先拿兩個函數來說：

棧空

現在執行到一個 函數A，函數A 入棧

函數A 又調用了 函數B，函數B 入棧

函數B 執行完后 出棧

然后繼續執行 函數A，執行完后A也 出棧

棧空

更復雜一點的話，來看一段代碼：

這段代碼在 調用棧中的運行順序如下圖：

這個調用棧其實大家經常會見到，就是在控制臺報錯的時候，錯誤信息顯示的就是當前時刻調用棧的狀態。

But, 上面我們討論的其實都是同步代碼，代碼在運行的時候只用 調用棧 解釋就可以了。

那么，假如我們發起了一個網絡請求(request)，或者設置了一個定時器延時(setTimeout)，一段時間后的代碼（回調函數）肯定不是直接被加到調用棧吧？

這時就要引出 事件表格（Event Table） 和 事件隊列 (Event Queue) 了

Event Table

Event Table 可以理解成一張 事件->回調函數 對應表

它就是用來存儲 JavaScript 中的異步事件 (request, setTimeout, IO等) 及其對應的回調函數的列表
Event Queue

Event Queue 簡單理解就是 回調函數 隊列，所以它也叫 Callback Queue

當 Event Table 中的事件被觸發，事件對應的 回調函數 就會被 push 進這個 Event Queue，然后等待被執行
Event Loop

先來看一個流程圖：

開始，任務先進入 Call Stack

同步任務直接在棧中等待被執行，異步任務從 Call Stack 移入到 Event Table 注冊

當對應的事件觸發（或延遲到指定時間），Event Table 會將事件回調函數移入 Event Queue 等待

當 Call Stack 中沒有任務，就從 Event Queue 中拿出一個任務放入 Call Stack

而 Event Loop 指的就是這一整個圈圈：

它不停檢查 Call Stack 中是否有任務（也叫棧幀）需要執行，如果沒有，就檢查 Event Queue，從中彈出一個任務，放入 Call Stack 中，如此往復循環。

好啦，不知道有沒有看明白呢？放一張更經典的圖：

其中與 Event Queue 對應的還有一個叫 Job Queue，它主要是用來執行 Promise 的，這兩種 Queue 有什么區別呢？

這就涉及到 宏任務 (macro task) 和 微任務 (micro task) 了，我們放在下篇再講~

參考文章

原文鏈接
MDN EventLoop
javascript-event-loop
understanding-js-the-event-loop
這一次，徹底弄懂JavaScript執行機制
understanding-event-loop-call-stack-event-job-queue-in-javascript

歡迎關注我的公眾號：碼力全開

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109906.html

相關文章

  • 淺析 JS 事件循環之 Microtask 和 Macrotask

    摘要：常見應用則是為了完成一些更新應用程序狀態的較小的任務，如處理的回調和的修改，以便讓這些任務在瀏覽器重新渲染之前執行。常見應用執行順序的實現需要至少一個和至少一個。 簡介 我們在上一篇 《淺析 JS 中的EventLoop 事件循環》 中提到一個 Event Queue，其實在事件循環中 queue 一共有兩種，還有一種叫 Job Queue 其中 Event Queue 在 HTML...

    sihai 評論0 收藏0

  • 【Node.js】理解事件循環機制

    摘要：前沿是基于引擎的運行環境具有事件驅動非阻塞等特點結合具有網絡編程文件系統等服務端的功能用庫進行異步事件處理線程的單線程含義實際上說的是執行同步代碼的主線程一個程序的啟動不止是分配了一個線程，而是我們只能在一個線程執行代碼當出現資源調用連接等 前沿 Node.js 是基于V8引擎的javascript運行環境. Node.js具有事件驅動, 非阻塞I/O等特點. 結合Node API, ...

    Riddler 評論0 收藏0

  • 事件循環(EventLoop)的學習總結

    摘要：事件循環當進程啟動時，會創建一個循環，每個循環通過內部的觀察者來查看是否有事件需要處理，如果有就取出事件和它相關的回調函數去執行，執行完以后就進入下一個循環，如果不再有就退出進程。 前言 在學習eventloop之前，我們需要復習一下js的單線程和異步。雖說js是單線程的，但是在瀏覽器和Node中都做了相應的處理。如瀏覽器中的web workers（工作線程），Node中的child_...

    lentoo 評論0 收藏0

  • 事件循環(EventLoop)的學習總結

    摘要：事件循環當進程啟動時，會創建一個循環，每個循環通過內部的觀察者來查看是否有事件需要處理，如果有就取出事件和它相關的回調函數去執行，執行完以后就進入下一個循環，如果不再有就退出進程。 前言 在學習eventloop之前，我們需要復習一下js的單線程和異步。雖說js是單線程的，但是在瀏覽器和Node中都做了相應的處理。如瀏覽器中的web workers（工作線程），Node中的child_...

    hizengzeng 評論0 收藏0

  • 事件循環(EventLoop)的學習總結

    摘要：事件循環當進程啟動時，會創建一個循環，每個循環通過內部的觀察者來查看是否有事件需要處理，如果有就取出事件和它相關的回調函數去執行，執行完以后就進入下一個循環，如果不再有就退出進程。 前言 在學習eventloop之前，我們需要復習一下js的單線程和異步。雖說js是單線程的，但是在瀏覽器和Node中都做了相應的處理。如瀏覽器中的web workers（工作線程），Node中的child_...

    ninefive 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<