JavaScript事件循環(huán)中微任務(wù)和宏任務(wù)有什么區(qū)別

現(xiàn)在 div 顯示了 i 的值的增長，這就是進(jìn)度條的一種。

用例 3：在事件之后做一些事情

在事件處理程序中，我們可能會決定推遲某些行為，直到事件冒泡并在所有級別上得到處理后。我們可以通過將該代碼包裝到零延遲的 setTimeout  中來做到這一點。

在 創(chuàng)建自定義事件[1] 一章中，我們看到過這樣一個例子：自定義事件 menu-open 被在 setTimeout  中分派(dispatched)，所以它在 click 事件被處理完成之后發(fā)生。

menu.onclick = function() {   // ...    // 創(chuàng)建一個具有被點擊的菜單項的數(shù)據(jù)的自定義事件   let customEvent = new CustomEvent("menu-open", {     bubbles: true   });    // 異步分派（dispatch）自定義事件   setTimeout(() => menu.dispatchEvent(customEvent)); };

宏任務(wù)和微任務(wù)

除了本章中所講的 宏任務(wù)(macrotask) 外，還有在 微任務(wù)隊列[2] 一章中提到的 微任務(wù)(microtask)。

微任務(wù)僅來自于我們的代碼。它們通常是由 promise 創(chuàng)建的：對 .then/catch/finally 處理程序的執(zhí)行會成為微任務(wù)。微任務(wù)也被用于  await 的“幕后”，因為它是 promise 處理的另一種形式。

還有一個特殊的函數(shù) queueMicrotask(func)，它對 func 進(jìn)行排隊，以在微任務(wù)隊列中執(zhí)行。

每個宏任務(wù)之后，引擎會立即執(zhí)行微任務(wù)隊列中的所有任務(wù)，然后再執(zhí)行其他的宏任務(wù)，或渲染，或進(jìn)行其他任何操作。

例如，看看下面這個示例：

setTimeout(() => alert("timeout"));  Promise.resolve()   .then(() => alert("promise"));  alert("code");

這里的執(zhí)行順序是怎樣的?

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. code 首先顯示，因為它是常規(guī)的同步調(diào)用。

3. promise 第二個出現(xiàn)，因為 then 會通過微任務(wù)隊列，并在當(dāng)前代碼之后執(zhí)行。

4. timeout 最后顯示，因為它是一個宏任務(wù)。

更詳細(xì)的事件循環(huán)圖示如下(順序是從上到下，即：首先是腳本，然后是微任務(wù)，渲染等)：

微任務(wù)會在執(zhí)行任何其他事件處理，或渲染，或執(zhí)行任何其他宏任務(wù)之前完成。

這很重要，因為它確保了微任務(wù)之間的應(yīng)用程序環(huán)境基本相同(沒有鼠標(biāo)坐標(biāo)更改，沒有新的網(wǎng)絡(luò)數(shù)據(jù)等)。

如果我們想要異步執(zhí)行(在當(dāng)前代碼之后)一個函數(shù)，但是要在更改被渲染或新事件被處理之前執(zhí)行，那么我們可以使用 queueMicrotask  來對其進(jìn)行安排(schedule)。

這是一個與前面那個例子類似的，帶有“計數(shù)進(jìn)度條”的示例，但是它使用了 queueMicrotask而不是  setTimeout。你可以看到它在最后才渲染。就像寫的是同步代碼一樣：