异步 JavaScript 中微任务队列和回调队列有什么区别？-js教程-PHP中文网

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

PHPz

发布： 2023-08-24 09:33:02

转载

556 人浏览过

异步 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”回调。

因此，上面代码的输出将是（在控制台中） -