簡述JavaScript事件循環EventLoop

JavaScript事件循環，是js運行順序最基本的機制，本文用簡單通俗的語言講解一下JavaScript事件循環是怎麼運行的。但願能對你們理js解事件循環有所幫助 

 

        本文只是幫助理解，用詞不會很謹慎，若是在正式場合使用，請自行翻譯成高大上的專業詞彙。

        你們都知道JavaScript是單線程的，代碼都在執行棧中執行。那麼我寫了那麼老多代碼，好多好多，一坨一坨的，哪都是。程序怎麼選擇執行着一坨坨一堆堆的代碼誰先誰後呢。這就須要事件循環來機制來處理了

首先在這套機制裏有這三個東東。執行棧、宏任務、微任務

執行棧，是用來執行咱們寫的代碼的，怎麼執行本文闡述，只要知道它是執行代碼用的就好了

宏任務，能夠理解爲存放等待執行棧中執行代碼用的，它是個隊列。先進先出

微任務，和宏任務同樣也是存代碼用的，等待被執行棧執行的，它也是個隊列。先進先出

宏任務和微任務都是存代碼的，爲啥整倆呢？

爲啥整倆，emmm。。。小明你出去

宏任務和微任務區別就是底層如何選擇放入執行棧中執行，也就是放入執行棧的規則是不同的。

下面就說說規則是啥。這個規則其實就是JavaScript的時間循環機制（eventLoop）

首先什麼會被放入宏任務，什麼會被放入微任務呢。這個是已經規定好的。

宏任務包括：

主任務（例如一個script標籤，在html中一個script標籤就是一個宏任務）
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 環境)複製代碼

微任務包括：

Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 環境)複製代碼

知道了誰是宏任務誰是微任務，也就是有了原料了，怎麼加工呢，

第二就是機制怎麼運轉

上圖解釋：

一個js程序（好比一個網頁被打開）一開始是醬嬸的，爲何只有宏任務有東西。由於開始運行，咱們寫的代碼還沒開始執行，底層只能看到咱們寫的一坨坨代碼，也就是主任務。因此一開始，底層會把全部靜態主程序懟到宏任務裏。等待執行

下面就開始執行了，繼續上圖

宏1被壓入執行棧執行，在宏1執行中有可能產生宏任務和微任務，只要產生宏或微，就按照產生的順序插入到相應的任務隊列尾部。

接下來宏1執行完畢，宏1出棧

接下來，底層會檢查微任務隊列中有沒有任務。若是有就會執行全部等待執行的微任務

在微任務運行過程當中也有可能產生微任務和宏任務。同樣，只要產生宏或微，就按照產生的順序插入相應的隊尾。

微1執行完畢，出棧，接下來微2會入棧執行，而後是微3入棧執行

全部微任務執行完畢，這時纔會從新從宏任務隊列中選擇下一個任務執行，直到全部任務執行完畢

最後來個動畫