非同期JavaScriptのマイクロタスクキューとコールバックキューの違いは何ですか?-jsチュートリアル-php.cn

非同期JavaScriptのマイクロタスクキューとコールバックキューの違いは何ですか?

PHPz

リリース： 2023-08-24 09:33:02

転載

556 人が閲覧しました

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

非同期 JavaScript では、タスクをスケジュールするには Microtask Queue と Callback Queue の 2 つの方法があります。 JavaScript エンジンは、これら 2 つのキューを異なる方法で処理します。

Microtask Queue

Microtask Queue は、現在のタスクの後に実行されるタスクキューです。マイクロタスクキューは、コールバックキュー内の次のタスクに移動する前に、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

ログイン後にコピー

Callback Queue

Callback Queue is 現在のタスクの後に実行されるタスクのキューです。 コールバックキュー マイクロタスクキュー内のすべてのタスクを実行した後、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」コールバックを実行します。

したがって、上記のコードの出力は次のようになります (コンソール) -