JavaScript中怎么實現事件循環

今天就跟大家聊聊有關JavaScript中怎么實現事件循環，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

1.Main.js 執行

2.調用secondFunction

3.調用secondFunction引起調用firstFunction

4.執行firstFunction，輸出“I'm  first!”，接著由于firstFunction執行完畢，firstFunction會從調用棧中彈出。

5.secondFunction繼續執行，輸出“I'm  second!”。接著由于secondFunction執行完畢，secondFunction從調用棧中彈出。

6.***，main.js執行完畢，也從棧中彈出。

Event Loop：事件循環

了解了call stack在JavaScript引擎中是如何工作了之后，來看下如何使用異步回調函數來避免blocking  代碼。(譯者注：回調函數有多種實現方式，最常見的有：在函數中使用函數作用參數etc。)setTimeout就是使用的回調函數。看個栗子：

/* Within main.js */  var firstFunction = function () {    console.log("I'm first!"); };  var secondFunction = function () {    setTimeout(firstFunction, 5000);  console.log("I'm second!"); };  secondFunction();  /* Results:  * => I'm second!  * (And 5 seconds later)  * => I'm first!  */

下邊模擬調用棧(在上個栗子的基礎上我們這次推前點)

1....

2.secondFunction調用setTimeout，setTimeout入棧：

3.setTimeout執行后，瀏覽器會把setTimeout的回調函數(在這個栗子中是firstFunction)放到Event Table中。Event  Table 就是個注冊站：調用棧讓Event Table注冊一個函數，該函數會在5秒之后被調用。當指定的事情發生時，Event  Table會將這個函數移到Event Queue。Event Queue其實就是個緩沖區域，這里的函數等著被調用并移到調用棧。

問題來了，什么時候函數會從Event Queue移到調用棧咧?JavaScript引擎依據一條規則：有一個monitoring  process(不知翻譯成啥好)會持續不斷地檢查調用棧是否為空，一旦為空，它會檢查Event  Queue里邊是否有等待被調用的函數。如果存在，它就會調用這個Queue中***個函數并將其移到調用棧中。如果Event  Queue為空，那么這個monitoring process會繼續不定期的檢查。這一整個過程就是Event Loop。

4.一旦回調函數加入到Event表中，代碼不會被block住，瀏覽器不會等待5秒之后再繼續處理接下去的代碼，相反，瀏覽器繼續執行secondFunction的下一行代碼，console.log。

5.在background，Event Table會持續地監測是否有事件觸發，將函數移到Event  Queue中。在這個栗子中，secondFunction執行完畢，接著main.js也執行完畢。

6.從回調函數被放入Event Table后5秒鐘，Event Table把firstFucntion移到Event Queue中。

7.由于事件循環持續地監測調用棧是否已空，此時它一注意到調用棧空了，就調用firstFunction并創建一個新的調用棧。

8.一旦firstFunction執行完畢，調用棧空了，Event Table里也沒有注冊函數，Event Queue也為空。

看完上述內容，你們對JavaScript中怎么實現事件循環有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。