JavaScript 的事件機制

Turbo 發布于2019-08-23 11:30 / 2920人閱讀

摘要：的事件機制關于，查閱多篇博客，或多或少總有些出入，在此寫下自己關于的理解按同步與異步分首先判斷是同步還是異步同步就進入主進程異步就進入異步任務在中注冊函數當滿足觸發條件后被推入同步任務進入主線程后一直執行直到主線程空閑時才會去中查看是否有可

JavaScript 的事件機制

關于Event Loop，查閱多篇博客，或多或少總有些出入，在此寫下自己關于Event Loop的理解

按同步與異步分

首先判斷JS是同步還是異步,同步就進入主進程,異步就進入event table

異步任務在event table中注冊函數,當滿足觸發條件后,被推入event queue

同步任務進入主線程后一直執行,直到主線程空閑時,才會去event queue中查看是否有可執行的異步任務,如果有就推入主進程中

按宏任務與微任務分（更準確）

macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval，setImmediate, I/O, UI rendering

micro-task(微任務)：Promise.then，process.nextTick

許多地方把Promise標記為微任務，但是這容易讓人誤以為new Promise的時候這個過程是個微任務。其實是Promsie.then、Promise.catch是微任務，new Promise的時候當做普通的生成對象來看待，所以在此我標記為Promise.then

執行本輪個宏任務

過程中如果遇到微任務,是同步任務就將其放到微任務的[事件隊列]里，異步放入微任務[事件表]中，注冊函數，達到執行條件，推入微任務[事件隊列]中（目前為止我還不知道微任務有沒有異步任務）

遇到宏任務，是同步任務就將其放到宏任務的[事件隊列]里，異步放入宏任務[事件表]中，注冊函數，達到執行條件，推入宏任務[事件隊列]中

本輪宏任務執行完，查看微任務的[事件隊列],并將里面全部的微任務依次執行完,從宏任務[事件隊列]中執行下一輪宏任務

相關知識

JS單線程，這線程中只有一個唯一的事件循環

一個線程中，事件循環是唯一的，但是可以有多個任務隊列(微任務隊列只有一個)

任務隊列分宏任務隊列與微任務隊列

那么問題來了，多個宏任務隊列時，下一趟的宏任務該取哪個呢？上述方法中，我是將宏任務都看成一個隊列的

Examples

/* example1 */
setTimeout(function () {
    console.log(1);
},7);

new Promise(function (resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
        i == 99 && resolve();
    }
}).then(function () {
    console.log(3);
    setTimeout(() => {
        console.log(4);
    });
})

console.log(5);
// 2 3 5 （4 1） 后兩個數字的順序與兩定時器的delayTime有關，誰先滿足觸發條件就先輸出誰 （html5 標準中，規定delayTime >= 4ms）

/* example2 */
setTimeout(_ => console.log(4));

new Promise(resolve => {
    resolve()
    console.log(1)
}).then(_ => {
    console.log(3)
    Promise.resolve().then(_ => {
        console.log("before timeout")
    }).then(_ => {
        Promise.resolve().then(_ => {
            console.log("also before timeout")
        })
    })
})

console.log(2);
// 這個也不難，分析分析就出結果了

finally

綜上菜雞二問

微任務事件隊列中存在異步任務嘛？

多個宏任務事件隊列，下一輪宏任務時該從哪個宏任務事件隊列中取？

這些問題都需在不斷的深入了解中才能知道答案
以上就是閱讀多篇博客之后個人對Event Loop的一些見解，或有不正確之處，望批評指正

參考
前端基礎進階（十二）：深入核心，詳解事件循環機制
10分鐘理解JS引擎的執行機制

云服務器 GPU云服務器 javascript的事件事件機制事件冒泡機制事件注冊機制

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

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

Javascript系列之javascript機制

摘要：異步任務必須指定回調函數，當異步任務從任務隊列回到執行棧，回調函數就會執行。事件循環主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為。事件循環事件循環是指主線程重復從消息隊列中取消息執行的過程。參考鏈接：這一次，徹底弄懂 JavaScript 執行機制https://zhuanlan.zhihu.com/p/...從瀏覽器多進程到JS單線程，JS運行機制...

13651657101 2019-08-22 15:50 評論0 收藏0
JavaScript運行機制和事件循環

摘要：主線程不斷重復上面的三步，此過程也就是常說的事件循環。所以主線程代碼執行時間過長，會阻塞事件循環的執行。參考資料這一次，徹底弄懂執行機制任務隊列的順序機制事件循環搞懂異步事件輪詢與中的事件循環 1. 說明讀過本文章后，您能知道： JavaScript代碼在瀏覽器中的執行機制和事件循環面試中經常遇到的代碼輸出順序問題首先通過一段代碼來驗證你是否了解代碼輸出順序，如果你不知道輸出...

Ververica 2019-08-23 14:42 評論0 收藏0
JavaScript 運行機制詳解(理解同步、異步和事件循環)

摘要：從異步過程的角度看，函數就是異步過程的發起函數，事件監聽函數就是異步過程的回調函數。事件觸發時，表示異步任務完成，會將事件監聽器函數封裝成一條消息放到消息隊列中，等待主線程執行。 1.為什么JavaScript是單線程？ JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。那么，為什么JavaScript不能有多個線程呢？這樣能提高效率啊。JavaScrip...

loonggg 2019-08-20 18:13 評論0 收藏0
JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用

摘要：機制詳解與中實踐應用歸納于筆者的現代開發語法基礎與實踐技巧系列文章。事件循環機制詳解與實踐應用是典型的單線程單并發語言，即表示在同一時間片內其只能執行單個任務或者部分代碼片。 JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用歸納于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文依次介紹了函數調用棧、MacroTask 與 Micr...

livem 2019-08-21 16:19 評論0 收藏0
JS與Node.js中的事件循環

摘要：的單線程，與它的用途有關。特點的顯著特點異步機制事件驅動。隊列的讀取輪詢線程，事件的消費者，的主角。它將不同的任務分配給不同的線程，形成一個事件循環，以異步的方式將任務的執行結果返回給引擎。這兩天跟同事同事討論遇到的一個問題，js中的event loop，引出了chrome與node中運行具有setTimeout和Promise的程序時候執行結果不一樣的問題，從而引出了Nodejs的...

abson 2019-08-22 11:14 評論0 收藏0
初窺JavaScript事件機制的實現（一）—— Node.js事件驅動實現概覽

摘要：如果當前沒有事件也沒有定時器事件，則返回。相關資料關于的架構及設計思路的事件討論了使用線程池異步運行代碼。下一篇初窺事件機制的實現二中定時器的實現在瀏覽器中，事件作為一個極為重要的機制，給予JavaScript響應用戶操作與DOM變化的能力；在Node.js中，事件驅動模型則是其高并發能力的基礎。學習JavaScript也需要了解它的運行平臺，為了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 評論0 收藏0