<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

因?yàn)?是Promise,Promise是微任務(wù)。

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

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

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

3.1 結(jié)論

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

4、代碼案例

<body>

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

<script>

// 這一段是dom渲染的

let app=document.getElementById("app")

let cont='<p>我是p標(biāo)簽</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 【錯(cuò)誤的】

因?yàn)槲⑷蝿?wù)和宏任務(wù)之間還有一個(gè)DOM渲染

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

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

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

4.2 結(jié)論和運(yùn)用的場(chǎng)景

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

這個(gè)結(jié)論的運(yùn)用場(chǎng)景

我們都做過echarts.我們知道渲染echarts的時(shí)候。

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

所以有的小伙伴會(huì)請(qǐng)請(qǐng)求的時(shí)機(jī)放在monuted()這個(gè)生命周期中

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

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

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

DOM肯定渲染完了。因?yàn)檎?qǐng)求是宏任務(wù)。

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

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

您可能感興趣的文章: