腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript中的宏任務(wù)和微任務(wù)詳情

更新時間：2021年11月23日 13:58:09 作者：詠吟

這篇文章主要介紹了JavaScript中的宏任務(wù)和微任務(wù)，下面文章圍繞JavaScript宏任務(wù)和微任務(wù)相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助

1、微任務(wù)有哪些

Promise

await和async

2、宏任務(wù)有哪些

setTimeout

setInterval

DOM事件
AJAX請求

3、案例

<script>

console.log(1)

setTimeout(()=>{

    console.log("2")

},0)

Promise.resolve().then(()=>{

    console.log('3')

})

console.log(4)

</script>

我們發(fā)現(xiàn)打印的順序是1-4-3-2

為什么是這樣的順序？

先打印1-4這肯定是沒有問題的

為啥先打印3然后才是2

因為3是Promise,Promise是微任務(wù)。

2是setTimeout，它是宏任務(wù)

微任務(wù)的執(zhí)行時機比宏任務(wù)早。

所以先執(zhí)行的是3然后才是2

3.1 結(jié)論

先同步后異步，先微后宏
微任務(wù)的執(zhí)行時機比宏任務(wù)早哈~

4、代碼案例

<body>

    <div id="app"></div>

<script>

// 這一段是dom渲染的

let app=document.getElementById("app")

let cont='<p>我是p標簽</p>'

app.append(cont)

// dom渲染結(jié)束



console.log(1)

setTimeout(()=>{

    console.log("2")

    alert('setTimeout2')

},0)

Promise.resolve().then(()=>{

    console.log('3')

    alert('3')

})

console.log(4)

</script>

</body>

4.1 代碼分析

上面這一段代碼的執(zhí)行分析：

肯定是先執(zhí)行1-4

然后根據(jù)先微任務(wù)后宏任務(wù)

就是輸出3然后彈出3

然后就是說輸出2然后彈出setTimeout2 【錯誤的】

因為微任務(wù)和宏任務(wù)之間還有一個DOM渲染

所以然后是dom渲染，最后才是宏任務(wù)

所以輸出1-4后，執(zhí)行的是DOM渲染。

然后才是輸出2然后彈出setTimeout2

4.2 結(jié)論和運用的場景

微任務(wù)》DOM渲染》宏任務(wù) 看下面的例子

這個結(jié)論的運用場景

我們都做過echarts.我們知道渲染echarts的時候。

需要頁面的DOM渲染完畢后，才能拿到節(jié)點進行渲染。

所以有的小伙伴會請請求的時機放在monuted()這個生命周期中

這樣就可以確保返回來的數(shù)據(jù)肯定能夠正常渲染在頁面上。

其實根據(jù)上面這個結(jié)論。

你完全可以在created中去請求數(shù)據(jù)。返回來的的時候。

DOM肯定渲染完了。因為請求是宏任務(wù)。

宏任務(wù)的執(zhí)行時機是在DOM渲染后的哈

到此這篇關(guān)于JavaScript中的宏任務(wù)和微任務(wù)詳情的文章就介紹到這了,更多相關(guān)JavaScript中的宏任務(wù)和微任務(wù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JavaScript中的宏任務(wù)和微任務(wù)詳情

目錄

1、微任務(wù)有哪些

2、宏任務(wù)有哪些