BLOG

非同期処理メモ⑨

こんにちは。

いつもおはようございますですが、今日は更新が夕方になりましたどうもハヤトワンです。

今日も非同期処理の続きをメモっていきます。

マクロタスクの代表例

・setTimeout

・setInterval

・requestAnimationFrame

マイクロタスクの代表例

・Promise

・queueMicrotask

・MutationObserver

この動きについて

setTimeout(function task1() {
  console.log('タスクその1');
});

new Promise(function promise(resolve) {
  console.log('promise');
  resolve();
}).then(function job1() {
  console.log('ジョブその1');
});

console.log('global end');

コンソール

promise
global end
ジョブその1
 タスクその1

▼登場人物

・コールスタック

・非同期API

・マイクロタスク(ジョブキュー)(イベントループ)

・マイクロタスク(タスクキュー)(イベントループ)

まずマイクロタスクとマクロタスクはそれぞれキューを管理しているので、分かれて存在している。

ここでスクリプトが実行されると、まずsetTimeout(タスクその1)が呼び出される(非同期APIにて)

このsetTimeoutはマクロタスクに「タスクその1」を登録する。

次にPromiseが呼び出され(コールスタック内)、このPromiseのthenメソッドが非同期処理として待機することになる(ジョブその1)(非同期APIにて)

そこですぐに非同期APIにてresolveが呼ばれ、マイクロタスクに「ジョブその1」が登録される。

そしてコールスタックの処理が終了すると(Promise)、イベントループががまずマイクロタスクのほうにジョブがないかを確認する。

この場合「ジョブその1」が見つかるので、「ジョブその1」がコールスタックの中で実行されることになる。

「ジョブその1」が終了すると、この時点ではマイクロタスクにジョブはないので、次に実行されるのはマクロタスクの「タスクその1」になる。

そのため、setTimeoutで登録した「タスクその1」というのはPromiseで登録した「ジョブその1」よりも必ずあとに呼ばれることになる。

このように、マイクロタスクとマクロタスクは、同じイベントのループで発見されたときには必ずマイクロタスクの方から先に処理されることになる。

ふむふむ。

細かい仕様があるんですね。

また明日からも見ていきます!

それではまた!