はじめに
JavaScriptには２種類の非同期処理のキューが存在します。
それが、、MacrotasksとMicrotasksです。
それがどういったものかを見ていこうと思います！
Macrotasksとは
Macrotasksはタスクキューとも呼ばれており、1つずつタスクを実行します。
例えば、setTimeoutやsetIntervalなどのコールバック関数が該当します。
※ジョブキューの後に実行される。
Microtasksとは
Microtasksはジョブキューと呼ばれており、順番が回ってきたら全てのタスクを実行します。
こちらはPromiseなどが該当します。
※タスクキューのより先に実行される。
動きの解説
以下のコードを利用して実行順序がどうなっているかの解説を行います。
// 非同期処理かつMacrotaskなのでタスクキューに追加
setTimeout(function task1() {
console.log('task1');
});
// Promiseの即時関数を定義
new Promise(function promise(resolve) {
// この部分は同期的に処理されるので一番早くコンソール出力する
console.log('promise');
resolve();
}).then(function job1() {
// 非同期処理かつMicrotaskなのでジョブキューに追加
console.log('job1');
});
// グローバルコンテキストが終了したのでここが実行される
console.log('global end');
実行の流れ
①まず、setTimeout関数は非同期処理のためタスクキューに追加される。(ここでは実行されない)
②次に、Promiseの中身である関数では同期的に処理されるので、一番最初に処理されます。
③thenメソッドも非同期処理のため、タスクキューに追加されるため実行されません。
④ここで、最後の行のコードであるconsole.log('global end');が実行されます。
⑤setTimeout関数はMacrotaskで、thenはMicroTaskなので、thenが先に実行されます。
⑥最後にキューに残っているsetTimeout関数の処理を実行して終了です。
ちなみに実行結果は以下の通りです。
"promise"
"global end"
"job1"
"task1"
終わりに
ややこしい部分ではありますが、ここを理解しておかないと実装時に意図しないエラーが発生することもあるので気をつけましょう！