js事件循環(huán)機(jī)制(瀏覽器端Event Loop) 以及async/await的理解

CKJOKER 發(fā)布于2019-08-23 14:22 / 1804人閱讀

摘要：接下來處理微任務(wù)隊列，打印，后面一個不會有任何打印，但是會執(zhí)行執(zhí)行后面的代碼打印進(jìn)入第二次事件循環(huán)，執(zhí)行宏任務(wù)隊列打印

事件循環(huán)機(jī)制

理解js的事件循環(huán)機(jī)制，能夠很大程度的幫我們更深層次的理解平時遇到的一些很疑惑的問題

簡單版本

下面來看一段代碼,想想它的結(jié)果和你的結(jié)果是否一樣

    setTimeout(function() {
        console.log(1)
    }, 0)
    
    console.log(2)
    
    //  執(zhí)行結(jié)果是 2 1

我們可以將js的任務(wù)分為同步任務(wù)和異步任務(wù), 按照這種分類js的執(zhí)行機(jī)制如下

任務(wù)執(zhí)行隊列分為同步任務(wù)隊列和異步任務(wù)隊列

代碼執(zhí)行時，遇到同步代碼，會被直接推入同步任務(wù)隊列并依次執(zhí)行

遇到異步代碼(如setTimeout、setInterval), 會被直接推入異步任務(wù)隊列

當(dāng)同步任務(wù)隊列執(zhí)行完畢，這個時候異步任務(wù)隊列的任務(wù)會被依次推入同步任務(wù)隊列并依次執(zhí)行

所以上面的代碼執(zhí)行的時候, setTimeout()不會被立即執(zhí)行，會被推到異步任務(wù)隊列里面, 之后再執(zhí)行console.log(2), 同步任務(wù)隊列任務(wù)執(zhí)行完畢之后，會去異步任務(wù)隊列的任務(wù)會被依次推到 同步任務(wù)隊列并執(zhí)行

終極版本

下面來看一段代碼,想想它的結(jié)果和你的結(jié)果是否一樣

    setTimeout(function() {
        console.log(1)
    }, 0)
    
    new Promise(function(resolve, reject) {
        console.log(2)
        resolve()
    }).then((res) => {
        console.log(3)
    })
    console.log(4)
    
    // 執(zhí)行結(jié)果是 2 4 3 1

js異步任務(wù)按照準(zhǔn)確的劃分，應(yīng)該將任務(wù)分為

宏任務(wù): setTimeout、setInterval

微任務(wù): 例如Promise.then方法。注意new Promsie()的時候是同步，立即執(zhí)行。

注意: 現(xiàn)在有三個隊列: 同步隊列(也稱執(zhí)行棧)、宏任務(wù)隊列、微任務(wù)隊列

所以針對這種機(jī)制，js的事件循環(huán)機(jī)制應(yīng)該是這樣的

遇到同步代碼，依次推入同步隊列并執(zhí)行

當(dāng)遇到setTimeout、setInterval,會被推到宏任務(wù)隊列

如果遇到.then，會被當(dāng)作微任務(wù)，被推入微任務(wù)隊列

同步隊列執(zhí)行完畢，然后會去微隊列取任務(wù)，直到微隊列清空。然后檢查宏隊列，去宏隊列取任務(wù)，并且每一個宏任務(wù)執(zhí)行完畢都會去微隊列跑一遍，看看有沒有新的微任務(wù)，有的話再把微任務(wù)清空。這樣依次循環(huán)

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

 let promise = new Promise(resolve => {
   console.log(3);
   resolve();
 }).then(data => {
   console.log(100);
 }).then(data => {
   console.log(200);
 });
    
 console.log(2);

所以對于以上的代碼執(zhí)行流程如下:

遇到同步任務(wù)先輸出1。

setTimeout是宏任務(wù)，會先放到宏任務(wù)隊列中。

new Promise是立即執(zhí)行的，所以會先輸出3。

而Promise.then是微任務(wù)，會依次排列到微任務(wù)隊列中，繼續(xù)向下執(zhí)行輸出2。

現(xiàn)在執(zhí)行棧中的任務(wù)已經(jīng)清空，再將微任務(wù)隊列清空，依次輸出100和200。

然后每次取出一個宏任務(wù)，因為現(xiàn)在只有一個宏任務(wù)，所以最后輸出setTimeout。

async/await async

當(dāng)我們在函數(shù)前使用async的時候，使得該函數(shù)返回的是一個Promise對象

async function test() {
    return 1   // async的函數(shù)會在這里幫我們隱士使用Promise.resolve(1)
}
// 等價于下面的代碼
function test() {
   return new Promise(function(resolve, reject) {
       resolve(1)
   })
}

可見async只是一個語法糖，只是幫助我們返回一個Promise而已

await

await表示等待，是右側(cè)「表達(dá)式」的結(jié)果，這個表達(dá)式的計算結(jié)果可以是 Promise 對象的值或者一個函數(shù)的值（換句話說，就是沒有特殊限定）。并且只能在帶有async的內(nèi)部使用

使用await時，會從右往左執(zhí)行，當(dāng)遇到await時，會阻塞函數(shù)內(nèi)部處于它后面的代碼，去執(zhí)行該函數(shù)外部的同步代碼，當(dāng)外部同步代碼執(zhí)行完畢，再回到該函數(shù)內(nèi)部執(zhí)行剩余的代碼, 并且當(dāng)await執(zhí)行完畢之后，會先處理微任務(wù)隊列的代碼

下面來看一個栗子:

        async function async1() {
            console.log( "async1 start" )
            await async2()
            console.log( "async1 end" )
        }
        async function async2() {
            console.log( "async2" )
        }
        console.log( "script start" )
        setTimeout( function () {
            console.log( "setTimeout" )
        }, 0 )
        async1();
        new Promise( function ( resolve ) {
            console.log( "promise1" )
            resolve();
        } ).then( function () {
            console.log( "promise2" )
        } )
        console.log( "script end" )

下面是在chrome瀏覽器上輸出的結(jié)果

使用事件循環(huán)機(jī)制分析:

首先執(zhí)行同步代碼，console.log( "script start" )

遇到setTimeout,會被推入宏任務(wù)隊列

執(zhí)行async1(), 它也是同步的，只是返回值是Promise，在內(nèi)部首先執(zhí)行console.log( "async1 start" )

然后執(zhí)行async2(), 然后會打印console.log( "async2" )

從右到左會執(zhí)行, 當(dāng)遇到await的時候，阻塞后面的代碼，去外部執(zhí)行同步代碼

進(jìn)入 new Promise,打印console.log( "promise1" )

將.then放入事件循環(huán)的微任務(wù)隊列

繼續(xù)執(zhí)行，打印console.log( "script end" )

外部同步代碼執(zhí)行完畢，接著回到async1()內(nèi)部, 由于async2()其實是返回一個Promise, await async2()相當(dāng)于獲取它的值，其實就相當(dāng)于這段代碼Promise.resolve(undefined).then((undefined) => {}),所以.then會被推入微任務(wù)隊列, 所以現(xiàn)在微任務(wù)隊列會有兩個任務(wù)。接下來處理微任務(wù)隊列，打印console.log( "promise2" )，后面一個.then不會有任何打印，但是會執(zhí)行

執(zhí)行后面的代碼, 打印console.log( "async1 end" )

進(jìn)入第二次事件循環(huán)，執(zhí)行宏任務(wù)隊列, 打印console.log( "setTimeout" )

GPU云服務(wù)器云服務(wù)器 js事件循環(huán)機(jī)制 gpu async await Event Loop event事件 js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/100510.html

發(fā)表評論

登陸后可評論

0條評論

CKJOKER

男|高級講師

我要關(guān)注我要私信

TA的文章

CDN加速可以為網(wǎng)絡(luò)用戶解決哪些難題？

閱讀 1093·2021-11-22 13:52
CSS實現(xiàn)照片堆疊效果

閱讀 1004·2019-08-30 15:44
偽元素能做好多事

閱讀 621·2019-08-30 15:43
行內(nèi)元素和塊狀元素居中

閱讀 2488·2019-08-30 12:52
對min/max-width/height的認(rèn)識

閱讀 3533·2019-08-29 16:16
loading

閱讀 711·2019-08-29 13:05
整理2

閱讀 2999·2019-08-26 18:36
前端利用pdfobject.js處理pdf文件

閱讀 2077·2019-08-26 13:46

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js事件循環(huán)機(jī)制(瀏覽器端Event Loop) 以及async/await的理解

相關(guān)文章

最后一次搞懂 Event Loop

**筆試題之Event Loop終極篇**

由setTimeout深入JavaScript執(zhí)行環(huán)境的異步機(jī)制

**面試題之Event Loop終極篇**

**理清瀏覽器下的事件循環(huán)機(jī)制（Event Loop）**

發(fā)表評論

0條評論

CKJOKER

男|高級講師

TA的文章

CDN加速可以為網(wǎng)絡(luò)用戶解決哪些難題？

CSS實現(xiàn)照片堆疊效果

偽元素能做好多事

行內(nèi)元素和塊狀元素居中

對min/max-width/height的認(rèn)識

loading

整理2

前端利用pdfobject.js處理pdf文件

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js事件循環(huán)機(jī)制(瀏覽器端Event Loop) 以及async/await的理解

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！