JavaScript中的宏任務和微任務詳情

Posted on by

1、微任務有哪些

Promise

await和async

2、宏任務有哪些

setTimeout

setInterval

  • DOM事件
  • AJAX請求

3、案例

<script>

console.log(1)

setTimeout(()=>{

    console.log("2")

},0)

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

    console.log('3')

})

console.log(4)

</script>

我們發現打印的順序是1-4-3-2

為什麼是這樣的順序？

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

為啥先打印3然後才是2

因為3是Promise,Promise是微任務。

2是setTimeout，它是宏任務

微任務的執行時機比宏任務早。

所以先執行的是3然後才是2

3.1 結論

  • 先同步後異步，先微後宏
  • 微任務的執行時機比宏任務早哈~

4、代碼案例

<body>

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

<script>

// 這一段是dom渲染的

let app=document.getElementById("app")

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

app.append(cont)

// dom渲染結束



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 代碼分析

上面這一段代碼的執行分析：

肯定是先執行1-4

然後根據先微任務後宏任務

就是輸出3然後彈出3

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

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

所以然後是dom渲染，最後才是宏任務

所以輸出1-4後，執行的是DOM渲染。

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

4.2 結論和運用的場景

微任務》DOM渲染》宏任務 看下面的例子

這個結論的運用場景

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

需要頁面的DOM渲染完畢後，才能拿到節點進行渲染。

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

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

其實根據上面這個結論。

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

DOM肯定渲染完瞭。因為請求是宏任務。

宏任務的執行時機是在DOM渲染後的哈

到此這篇關於JavaScript中的宏任務和微任務詳情的文章就介紹到這瞭,更多相關JavaScript中的宏任務和微任務內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：