JavaScript 的setTimeout與事件迴圈機制event-loop

2022-07-05 18:01:49

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內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！