JavaScript 的setTimeout與事件循環機制event-loop

Posted on by

1.先說說我們都知道的setTimeout

setTimeout在我們寫代碼中會經常用到，不管是前端還是服務端，目的是延遲執行。

    setTimeout(() => {
        console.log('延遲執行');
    }，1000);

貌似沒什麼可講的。

2.再講講我們可能不知道的setTimeout

我們可能遇到這麼一個問題：在一段邏輯中，需要執行某段代碼，但是怎麼也沒有效果。最後，在試試看+從網上找的情況下，用瞭一個setTimeout,神奇的事情發生瞭，程序能夠正確運行。

我寫一個具體的我們在實際項目中用到的：

需求是點擊某個按鈕時彈出一個彈框，然後點擊彈框外的任何區域，彈框消失。但點擊彈框中的任何地方和元素，彈框不會消失。

<body>
        <button type="button" class="clickBtn">點擊我</button>
        <div id="mask">
            <p class="title">提示</p>
            <p>
                <span class="area-content">這是一個彈框</span>
                <a href="javascript:;" rel="external nofollow" >跳轉</a>
            </p>
        </div>
        <script type="text/javascript">
            document.querySelector('.clickBtn').addEventListener('click', () => {
                document.querySelector('#mask').style.display = 'block';
                setTimeout(() => {
                    window.addEventListener('click', hides, false);
                }, 0);
            });
            function hides(e) {
                document.querySelector('#mask').style.display = 'none';
                window.removeEventListener('click', hides, false);
            }

            document.querySelector('#mask').addEventListener('click', e => {
                e.stopPropagation();
            });
        </script>
    </body>

通過上面的寫法，利用setTimeout很方便的實現瞭頁面功能，而不需要去通過各種e.target的判斷去費力的實現。

上面代碼最重要的在於setTimeout(()=>{},0) 這段邏輯。要明白為什麼加個setTimeout就能實現，而如果不加，那麼彈框就無法正確顯示和隱藏，就需要知道一個很重要的概念： event-loop。 也就是事件循環機制。

event-loop

事件循環機制其實在網站上也有不少的分析，而且分析的不錯。最後我會附上好文章的鏈接供大傢參考。

我在此想從宏觀上再提一下event-loop

event-loop在node中和在瀏覽器中的實現方式不相同。node是通過libuv庫來實現，而瀏覽器是不同的廠商去完成。這裡不討論node，隻看瀏覽器廠商是怎麼處理時間循環的。

其中有重點的含義需要清除。既然叫事件循環，那麼就說明事件是循環著執行的。一個事件循環有一個或多個任務隊列,每一個任務隊列裡的任務是嚴格按照先進先出的順序執行的，但是不同任務隊列的任務的執行順序是不確定的。

那麼哪些行為屬於task或者microtask呢？標準沒有闡述，但各種技術文章總結都如下(不包含node)：

  • macrotasks script(整體代碼), setTimeout, setInterval,
  • microtasks Promise

看一下標準闡述的事件循環的進程模型：

  • 1.選擇當前要執行的任務隊列，選擇一個最先進入任務隊列的任務，如果沒有任務可以選擇，則會跳轉至microtask的執行步驟。
  • 2.將事件循環的當前運行任務設置為已選擇的任務。
  • 3.運行任務。
  • 4.將事件循環的當前運行任務設置為null。

將運行完的任務從任務隊列中移除：

  • 5.microtasks步驟：進入microtask檢查點（performing a microtask checkpoint ）。
  • 6.更新界面渲染。
  • 7.返回第一步。

執行進入microtask檢查點時，用戶代理會執行以下步驟：

  • 設置進入microtask檢查點的標志為true。
  • 當事件循環的微任務隊列不為空時：選擇一個最先進入microtask隊列的microtask；設置事件循環的當前運行任務為已選擇的microtask；運行microtask；設置事件循環的當前運行任務為null；將運行結束的microtask從microtask隊列中移除。
  • 對於相應事件循環的每個環境設置對象（environment settings object）,通知它們哪些promise為rejected。
  • 清理indexedDB的事務。
  • 設置進入microtask檢查點的標志為false。

那麼該舉個例子瞭，上面的知識確實有些難懂。

console.log('script start');
setTimeout(function() {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

當然，如果你測試的瀏覽器支持的Promise不支持Promise/A+標準，或是你使用瞭其他Promise polyfill，運行結果可能有差異。

運行結果是：

script start
script end
promise1
promise2
setTimeout

具體的解釋步驟在後面附的鏈接中有詳細的解讀，我就不再囉嗦瞭。

知識想強調一下整個事件循環：

第一個事件循環裡，隻有一個任務，就是js的加載 -> 把setTimeout和promise分別放入macrotasks和microtask隊列中 ->js執行完後，進入下一個事件循環 -> 執行microtask任務隊列中的所有任務 -> 執行macrotasks中的一個任務，當前宏任務執行完畢後 -> 如果此時微任務隊列不為空，則重新執行所有微任務,如果微任務為空，則執行下一個macroTask -> 完成，繼續下一個事件循環

現在再回過頭來看剛開始我寫的那個彈框的例子，就能知道為什麼setTimeout隔0秒以後執行，也能實現需求瞭。根本原因就是因為setTimeout是一個task，需要在下一個時間周期執行。

setTimeout(() => {
   console.log(1); 
},0)

setTimeout(() => {
    console.log(2);
    Promise.resolve().then(() => console.log('promise1'));
    Promise.resolve().then(() => console.log('promise2'));
}, 0)
setTimeout(() => {
    console.log(3);
}, 0)

執行結果是：

1
2
promise1
promise2
3

3. node中的時間循環執行順序

node中的事件循環，總體上說，在node9之前，它的實現跟瀏覽器是不一樣的，就相同api的部分來說，宏任務的執行會有區別，比如說同樣是上面的這個例子， 在node 8.x中執行，順序是這樣的：

1
2
3
promise1
promise2

在node高版本中，跟瀏覽器的特性進行瞭對齊。所以在真正上線的時候，如果有線上編譯的情況，一定要註意node的版本，小心這些坑。

4. 關於事件循環中的promise

setTimeout比較簡單，也比較直接，我們還容易理解和使用。 但是當遇到promise的時候，會有些難度，可能如果隻涉及簡單的場景，promise倒是也會使用，無非就是 new Promise((resolve, reject)).then() 但是，當遇到復雜場景的時候，其實是會有坑，如果不真正瞭解原理，是容易掉坑裡的。

到此這篇關於JavaScript 的setTimeout與事件循環機制event-loop的文章就介紹到這瞭,更多相關JS setTimeout內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：