首页 > 文章 > web前端 > 异步 JavaScript 中微任务队列和回调队列有什么区别？

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

PHPz转载: 2023-08-24 09:33:02557浏览

在异步 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 中如何找出与特定条件匹配的所有元素？

查看更多