setTimeout と Promise を含む数行を実行すると、出力順序に驚かれるかもしれません。その理由は JavaScript イベント ループ で説明されています。これは、シングルスレッド言語がフリーズすることなくタイマー、ネットワーク呼び出し、クリックを処理できるようにするメカニズムです。

一度それを理解すると、混乱を招くバグの種類全体が意味を理解し始めます。各サンプルを Node.js 24 で実行し、出力はその実行から得られます。中心的な順序付けルールはブラウザーにも適用され、Node.js が異なる点を指摘します。 JavaScript の Promise の基本をすでに知っている場合は、さらに多くのことを理解できるでしょう。

イベントループが存在する理由

JavaScript は 1 つのメインスレッドでコードを実行するため、一度に実行されるコードは 1 つだけです。単にネットワーク要求を待っているだけでは、応答が返されるまでページがフリーズします。

したがって、JavaScript は待機しません。遅い作業はホスト環境、つまりバックグラウンドで処理できるブラウザまたは Node.js に渡されます。その作業が完了すると、コールバックがキューに入れられます。イベント ループの仕事は、キューに入れられたコールバックをスタックが空いたときにスタックに移動することです。

一人で働くシェフを想像してみてください。シェフは料理を見つめるのではなく、オーブンに料理を入れてタイマーをセットします。タイマーが鳴ると、タスクがリストに登録され、シェフは現在担当しているタスクを完了した後にタスクを受け取ります。

可動部品

タスクはマクロタスクと呼ばれることもあります。厳密に言えば、タスク ソースは複数存在する可能性があり、正確な詳細は環境によって異なります。

ルール

1. 呼び出しスタックが空になるまで、すべての同期コードを実行します。
2. 途中で追加された新しいマイクロタスクを含む、すべて のマイクロタスクを実行します。
3. 更新期限が迫っている場合は、ブラウザで更新をレンダリングします。
4. キューから 1 つ のタスクを取得して実行します。
5. ステップ 2 に戻ります。

最も重要な詳細: すべてのマイクロタスク、次に1つのタスク。ほとんどのイベント ループ パズルは、その 1 つのルールを適用することで解決されます。

注文を見る

console.log("1 sync");
setTimeout(() => console.log("5 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("2 sync");

// 1 sync
// 2 sync
// 3 promise
// 4 microtask
// 5 timeout

ここで何が起こったのかを説明します。 2 つの console.log 行は同期しているため、最初に実行されました。 Promise コールバックと queueMicrotask はマイクロタスク キューに入り、スタックが空になるとすぐに、追加された順序で実行されました。遅延がゼロであっても、タイマー コールバックはタスクのターンを待つ必要がありました。

マイクロタスクはタイマー間で実行されます

単一タスクが完了するたびに、マイクロタスク キューは再び空になります。この例はそれを証明しています。

setTimeout(() => {
  console.log("timer 1");
  Promise.resolve().then(() => console.log("promise inside timer 1"));
}, 0);
setTimeout(() => console.log("timer 2"), 0);

// timer 1
// promise inside timer 1
// timer 2

最初のタイマー中に作成された Promise は、2 番目のタイマーの前に実行されました。最新のブラウザと Node.js 11 以降はこのように動作します。

await が適切な場所

await は関数を 2 つに分割します。実行前のすべては同期的に実行され、実行後のすべてはマイクロタスクとしてスケジュールされます。これは多くの人を驚かせます:

async function task() {
  console.log("A before await");
  await null;
  console.log("C after await");
}

task();
console.log("B after calling task");

// A before await
// B after calling task
// C after await

async 機能はバックグラウンドでは起動しません。最初の await に到達するまで、同じスレッド上で実行されます。これは、null のように、本当の約束ではないものを待っている場合にも当てはまります。この構文の詳細については、JavaScript async/await ガイドを参照してください。

ループをブロックする

同期コードが実行されている間は、他のコードは実行できません。これを示すために、タイマーを 0 ミリ秒に設定し、スレッドを 0.5 秒間ビジー状態に保ちます。

const start = Date.now();
setTimeout(() => console.log("timer ran after", Date.now() - start, "ms"), 0);
while (Date.now() - start < 500) {}

// timer ran after about 500 ms

タイマーの遅延は最小であり、保証するものではありません。スタックが空になった場合にのみ実行されました。 Web ページでこのような長いループが発生すると、クリックが反応せず、アニメーションが停止します。サーバー上では、他のすべてのリクエストは待機する必要があるため、1 つの遅い同期呼び出しが Node.js プロセスのすべてのユーザーに悪影響を与える可能性があります。

ブロックの一般的な原因には、巨大なループ、非常に大規模な JSON の解析、リクエスト ハンドラーの readFileSync などの同期ファイル関数、および壊滅的な正規表現が含まれます。

応答性を維持する

負荷の高い作業の場合は、イベント ループに一呼吸置く機会を与えます。 1 つの方法は、タイマーで時々一時停止し、他のタスクを実行できるようにすることです。

const items = [0, 1, 2, 3, 4];

async function processAll() {
  for (const item of items) {
    if (item === 2) await new Promise((r) => setTimeout(r, 0));
    console.log("item", item);
  }
}

setTimeout(() => console.log("other work gets a turn"), 0);
processAll();

// item 0
// item 1
// other work gets a turn
// item 2
// item 3
// item 4

私たちが実際のタスクで譲歩したため、もう一方のタイマーは真ん中で実行されました。実際のコードでは、非常に多くの項目またはミリ秒ごとに生成されます。画像処理など、本当に CPU を使用する作業の場合は、ブラウザーの Web ワーカー、または別のスレッドで実行される Node.js のワーカー スレッドを使用します。

マイクロタスク飢餓

ループは次に進む前にマイクロタスク キューを完全に空にするため、マイクロタスクがさらにスケジュールを立て続けると、他のすべてが停止する可能性があります。これを 100,000 個のチェーンされたマイクロタスクでテストしました。

let count = 0;
let timerFired = false;
setTimeout(() => { timerFired = true; }, 0);

function spin() {
  count++;
  if (count < 100000) queueMicrotask(spin);
  else console.log("timer fired during microtasks?", timerFired);
}
queueMicrotask(spin);

// timer fired during microtasks? false

すべての作業が完了するまでタイマーは実行できませんでした。その連鎖が終わらなければ、タイマーは決して起動せず、ブラウザではページが再描画されることはありません。解決された Promise に対して await を指定して譲歩しても、別のマイクロタスクが追加されるだけなので、ここでは役に立ちません。他の人に順番を与えるには、タイマーなどの実際のタスクが必要です。

ブラウザでのレンダリング

ブラウザーは通常、タスクの間にペイントする機会を得ます。これは一般的なバグの説明です。

spinner.hidden = false;
doHeavyWork();              // blocks the thread
spinner.hidden = true;

ブラウザにはこれらの行間をレンダリングする機会がなかったため、スピナーは表示されません。これを修正するには、重労働が始まる前にフレームを通過させるか、その作業を作業者に移します。ビジュアルを変更するコードの場合、requestAnimationFrame は次のペイントの直前に実行されるため、アニメーションに最適なツールになります。

Node.jsの違い

Node.js には、タイマー、I/O ポーリング、setImmediate などのいくつかのフェーズを持つ独自のイベント ループがあります。独自のキューで実行される process.nextTick もあります。これらを非同期関数内から実行したときに確認された内容は次のとおりです。

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));
process.nextTick(() => console.log("nextTick"));
Promise.resolve().then(() => console.log("promise"));

// promise
// nextTick
// immediate
// timeout

多くの記事では、nextTick は常に約束を破り、タイマーは setImmediate を破ると述べています。私たちの結果は、それがそれほど単純ではないことを示しています。私たちのコードはすでにマイクロタスク内で実行されていたため、Promise キューが最初に実行されました。また、setTimeout と setImmediate の順序は、どこから呼び出されるかによって異なることが知られています。したがって、これらの正確な順序に依存するコードを作成しないでください。あることが次々と発生する必要がある場合は、それらを明示的に連鎖させます。

インタビュークイズ

答えを読む前に、順序を考えてみてください。

console.log("a");
setTimeout(() => console.log("b"), 0);
Promise.resolve().then(() => {
  console.log("c");
  setTimeout(() => console.log("d"), 0);
  Promise.resolve().then(() => console.log("e"));
});
console.log("f");

実行すると、a、f、c、e、b、dが出力されました。その理由は次のとおりです。

1. a と f は同期しているため、最初に実行されます。
2. スタックは空であるため、同じラウンドでマイクロタスク c が実行され、次に新しいマイクロタスク e が実行されます。
3. 今度は 1 つのタスク、つまり最初にキューに入れられたタイマー b です。
4. 次に、次のタスク: タイマー d。これはマイクロタスク中にキューに入れられました。

よくある間違い

• setTimeout の考えは正確です。 遅延は最小限にすぎません。
• async は別のスレッドを意味します。 非同期コードは待機の間にメインスレッドで実行されます。
• スリープを使用して順序を修正します。実際の状態を待つ方がはるかに信頼性が高く、これは不安定なテストにも当てはまります。
• forEachをawaitと組み合わせて使用​​します。項目間で待機しません。 JavaScript 配列メソッドを参照してください。
• サーバー ハンドラーで大量の同期作業を実行する。 1 つのリクエストが他のリクエストごとに遅延する可能性があります。

まとめ

基本的なルールを覚えておいてください。スタックが空になるまでスタックを実行し、すべてのマイクロタスクを実行してから 1 つのタスクを実行し、これを繰り返します。他のすべてはそこから派生します。定着させるには、上記のクイズの独自バージョンを作成し、出力を紙に予測して実行します。一つ間違えて、その理由を理解することは、どんな図よりも勉強になります。

よくある質問

学び続ける