首頁 > 文章 > web前端 > 非同步 JavaScript 中微任務佇列和回呼佇列有什麼不同？

非同步 JavaScript 中微任務佇列和回呼佇列有什麼不同？

PHPz轉載: 2023-08-24 09:33:02587瀏覽

异步 JavaScript 中微任务队列和回调队列有什么区别？

在非同步 JavaScript 中，有兩種方法來調度任務 - 微任務佇列和回呼佇列。 JavaScript 引擎對這兩個佇列的處理方式不同。

微任務佇列

微任務佇列是在目前任務之後執行的任務佇列。微任務佇列由 JavaScript 引擎處理，然後移至回呼佇列中的下一個任務。

範例

以下是微任務佇列如何運作的範例-

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      Promise.resolve().then(function() {
         console.log(&#39;promise resolve&#39;);
      });
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

#在上面的範例中，「setTimeout」回呼被加入回調隊列中。「Promise.resolve」被加入到微任務佇列中。 JavaScript 引擎將首先執行微任務佇列中的所有任務，然後再進入回呼佇列。

因此，上面程式碼的輸出將是（在控制台中） -

start
end
promise resolve
setTimeout

回呼隊列

回呼隊列是在目前任務之後執行的任務佇列。 回呼佇列由 JavaScript 引擎在執行完微任務佇列中的所有任務後處理。

範例

以下是回呼佇列如何運作的範例-

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

在在上面的範例中，'setTimeout'回呼被加入到回呼佇列中。 JavaScript 引擎會在執行完目前任務中的所有程式碼後執行「setTimeout」回呼。

因此，上面程式碼的輸出將是（在控制台中） -

start
end
setTimeout

微任務佇列和回呼佇列之間的差異

微任務佇列和回呼佇列之間的一些差異是-

#Microtask 佇列由JavaScript 引擎處理，然後再移至回呼佇列中的下一個任務。回呼佇列由JavaScript引擎在執行完微任務佇列中的所有任務後處理。

Microtask佇列目前任務完成後進行處理。回呼佇列在微任務佇列為空後進行處理。

微任務佇列在單獨的事件循環中進行處理。回呼佇列在同一個事件循環中處理。

微任務佇列的優點

#微任務佇列的一些優點回呼佇列上的微任務佇列是-

微任務佇列在單獨的事件循環中處理，這意味著如果主執行緒被阻塞，微任務佇列仍將
微任務佇列在目前任務完成後進行處理，這意味著任何依賴當前任務的程式碼都可以加入到微任務佇列中，並且它將被處理。當前任務完成後立即執行。
微任務佇列比回呼隊列具有更高的優先權，這意味著如果兩個佇列被安排同時執行，微任務佇列將首先執行。

回呼佇列的優點

回呼佇列相對於微任務佇列的優點之一是回呼佇列與主執行緒在同一事件循環中處理。這意味著如果主執行緒被阻塞，回呼隊列將不會被處理。

結論

在本教程中，我們研究了微任務佇列和回呼佇列之間的差異在非同步 JavaScript 中。我們也研究了每個隊列的優點。

以上是非同步 JavaScript 中微任務佇列和回呼佇列有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript 循环 class 线程主线程事件 promise 异步 ul

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在 Javascript 中使用 mongoose 建立 id？下一篇：如何在 Javascript 中使用 mongoose 建立 id？

看更多