BLOG

非同期処理メモ⑧(MacrotasksとMicrotasks)

おはようございます。

最近朝起きたら汗かいてることが多く、本当に11月の下旬ですかってなっておりますどうもハヤトワンです。

地球いよいよか?

さて、今日は少々急ぎめなので、1点だけについてサクッとメモ。

MacrotasksとMicrotasks

マクロタスクとは

タスクキューと呼ばれるもの

※タスクキューとは….

setTimeoutのコールバックを制御するためにjsランタイムに存在し、setTimeoutから受け取ったタスクを保存するキューのこと。

マイクロタスクとは

タスクキューとは別で存在する非同期処理の待ち行列のこと

→ジョブキュー

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

1番始めのsetTimeoutは非同期処理でタスクキューに入る為、グローバルコンテキストが終了された後に呼び出される。

※グローバルコンテキストとは

実行中のコンテキスト内の変数と関数のこと

Javascript実行環境について

続いては

new Promiseのコールバック関数

こちらは同期的に処理されるため、一番最初に表示されるのがconsole.log(‘promise’)になる。

次にthenメソッドの後に続くコールバック関数は非同期なのでグローバルコンテキストが終了した後に表示されることになる。

2番目に表示されるのはglobal end

3番目に表示されるのは

thenメソッドに続くマイクロタスクの部分が先に表示される。

パット見、最上部にあるsetTimeoutのコールバックのほうが先に表示されそうであるが、マクロタスクであるsetTimeoutはマイクロタスクよりあとに実行される。

予想外で複雑な動きしますねjavascriptさん。

ということで今日はここまで。

今日も良い1日を!