欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

貌似沒什么可講的。

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

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

我寫一個(gè)具體的我們在實(shí)際項(xiàng)目中用到的：

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

<body>
        <button type="button" class="clickBtn">點(diǎn)擊我</button>
        <div id="mask">
            <p class="title">提示</p>
            <p>
                <span class="area-content">這是一個(gè)彈框</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很方便的實(shí)現(xiàn)了頁面功能，而不需要去通過各種e.target的判斷去費(fèi)力的實(shí)現(xiàn)。

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

event-loop

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

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

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

其中有重點(diǎn)的含義需要清除。既然叫事件循環(huán)，那么就說明事件是循環(huán)著執(zhí)行的。一個(gè)事件循環(huán)有一個(gè)或多個(gè)任務(wù)隊(duì)列,每一個(gè)任務(wù)隊(duì)列里的任務(wù)是嚴(yán)格按照先進(jìn)先出的順序執(zhí)行的，但是不同任務(wù)隊(duì)列的任務(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ù)隊(duì)列，選擇一個(gè)最先進(jìn)入任務(wù)隊(duì)列的任務(wù)，如果沒有任務(wù)可以選擇，則會(huì)跳轉(zhuǎn)至microtask的執(zhí)行步驟。
  • 2.將事件循環(huán)的當(dāng)前運(yùn)行任務(wù)設(shè)置為已選擇的任務(wù)。
  • 3.運(yùn)行任務(wù)。
  • 4.將事件循環(huán)的當(dāng)前運(yùn)行任務(wù)設(shè)置為null。

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

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

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

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

那么該舉個(gè)例子了，上面的知識(shí)確實(shí)有些難懂。

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，運(yùn)行結(jié)果可能有差異。

運(yùn)行結(jié)果是：

script start
script end
promise1
promise2
setTimeout

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

知識(shí)想強(qiáng)調(diào)一下整個(gè)事件循環(huán)：

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

現(xiàn)在再回過頭來看剛開始我寫的那個(gè)彈框的例子，就能知道為什么setTimeout隔0秒以后執(zhí)行，也能實(shí)現(xiàn)需求了。根本原因就是因?yàn)閟etTimeout是一個(gè)task，需要在下一個(gè)時(shí)間周期執(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中的時(shí)間循環(huán)執(zhí)行順序

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

1
2
3
promise1
promise2

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

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

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

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

相關(guān)文章

最新評(píng)論