亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript?的setTimeout與事件循環(huán)機制event-loop

 更新時間：2022年07月05日 15:49:42   作者：??baymax??  
這篇文章主要介紹了JavaScript?的setTimeout與事件循環(huán)機制event-loop，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

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

setTimeout在我們寫代碼中會經(jīng)常用到，不管是前端還是服務(wù)端，目的是延遲執(zhí)行。

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

貌似沒什么可講的。

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

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

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

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

<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" >跳轉(zhuǎn)</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很方便的實現(xiàn)了頁面功能，而不需要去通過各種e.target的判斷去費力的實現(xiàn)。

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

event-loop

事件循環(huán)機制其實在網(wǎng)站上也有不少的分析，而且分析的不錯。最后我會附上好文章的鏈接供大家參考。

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

event-loop在node中和在瀏覽器中的實現(xiàn)方式不相同。node是通過libuv庫來實現(xiàn)，而瀏覽器是不同的廠商去完成。這里不討論node，只看瀏覽器廠商是怎么處理時間循環(huán)的。

其中有重點的含義需要清除。既然叫事件循環(huán)，那么就說明事件是循環(huán)著執(zhí)行的。一個事件循環(huán)有一個或多個任務(wù)隊列,每一個任務(wù)隊列里的任務(wù)是嚴(yán)格按照先進(jìn)先出的順序執(zhí)行的，但是不同任務(wù)隊列的任務(wù)的執(zhí)行順序是不確定的。

那么哪些行為屬于task或者microtask呢？標(biāo)準(zhǔn)沒有闡述，但各種技術(shù)文章總結(jié)都如下(不包含node)：

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

看一下標(biāo)準(zhǔn)闡述的事件循環(huán)的進(jìn)程模型：

  • 1.選擇當(dāng)前要執(zhí)行的任務(wù)隊列，選擇一個最先進(jìn)入任務(wù)隊列的任務(wù)，如果沒有任務(wù)可以選擇，則會跳轉(zhuǎn)至microtask的執(zhí)行步驟。
  • 2.將事件循環(huán)的當(dāng)前運行任務(wù)設(shè)置為已選擇的任務(wù)。
  • 3.運行任務(wù)。
  • 4.將事件循環(huán)的當(dāng)前運行任務(wù)設(shè)置為null。

將運行完的任務(wù)從任務(wù)隊列中移除：

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

執(zhí)行進(jìn)入microtask檢查點時，用戶代理會執(zhí)行以下步驟：

  • 設(shè)置進(jìn)入microtask檢查點的標(biāo)志為true。
  • 當(dāng)事件循環(huán)的微任務(wù)隊列不為空時：選擇一個最先進(jìn)入microtask隊列的microtask；設(shè)置事件循環(huán)的當(dāng)前運行任務(wù)為已選擇的microtask；運行microtask；設(shè)置事件循環(huán)的當(dāng)前運行任務(wù)為null；將運行結(jié)束的microtask從microtask隊列中移除。
  • 對于相應(yīng)事件循環(huán)的每個環(huán)境設(shè)置對象（environment settings object）,通知它們哪些promise為rejected。
  • 清理indexedDB的事務(wù)。
  • 設(shè)置進(jìn)入microtask檢查點的標(biāo)志為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');

當(dāng)然，如果你測試的瀏覽器支持的Promise不支持Promise/A+標(biāo)準(zhǔn)，或是你使用了其他Promise polyfill，運行結(jié)果可能有差異。

運行結(jié)果是：

script start
script end
promise1
promise2
setTimeout

具體的解釋步驟在后面附的鏈接中有詳細(xì)的解讀，我就不再啰嗦了。

知識想強調(diào)一下整個事件循環(huán)：

第一個事件循環(huán)里，只有一個任務(wù)，就是js的加載 -> 把setTimeout和promise分別放入macrotasks和microtask隊列中 ->js執(zhí)行完后，進(jìn)入下一個事件循環(huán) -> 執(zhí)行microtask任務(wù)隊列中的所有任務(wù) -> 執(zhí)行macrotasks中的一個任務(wù)，當(dāng)前宏任務(wù)執(zhí)行完畢后 -> 如果此時微任務(wù)隊列不為空，則重新執(zhí)行所有微任務(wù),如果微任務(wù)為空，則執(zhí)行下一個macroTask -> 完成，繼續(xù)下一個事件循環(huán)

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

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)

執(zhí)行結(jié)果是：

1
2
promise1
promise2
3

3. node中的時間循環(huán)執(zhí)行順序

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

1
2
3
promise1
promise2

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

4. 關(guān)于事件循環(huán)中的promise

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

到此這篇關(guān)于JavaScript 的setTimeout與事件循環(huán)機制event-loop的文章就介紹到這了,更多相關(guān)JS setTimeout內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論