JavaScript のイベント ループを理解する — 簡単になりました!

JavaScript は最も人気のあるプログラミング言語の 1 つであり、ウェブ上の Web サイトの約 90% で使用されています。しかし、最も扱いにくく、最も誤解されている概念の 1 つは、イベント ループ がどのように機能するかです。イベントループ、タスクキュー、コールスタック、マイクロタスクキュー、Web APIについて簡単に説明します。

JavaScript の何が特別なのでしょうか?

JavaScript はシングルスレッド言語です。これは、複数の処理を同時に処理できる C や Go のような言語とは異なり、一度に 1 つの処理を実行することを意味します。データのフェッチやタイマーの実行などの非同期タスクをスムーズに動作させるために、JavaScript は イベント ループ と呼ばれるものを使用します!

1. Web API とは何ですか?

Web API は、ネットワーク リクエストの作成 (フェッチを使用)、タイマーの設定 (setTimeout)、またはユーザーの位置情報へのアクセス ( を使用) などのタスクを処理するためにブラウザーまたは Node.js によって提供される追加のツールです。地理位置情報 API)。これらのタスクは、メインの JavaScript スレッドの外で実行されます。

例:

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

ここでは、メイン JavaScript が他のコードの実行を継続している間、ブラウザーがタイマーを処理します。

2. タスクキューとは何ですか?

タスク キュー は、Web API からのコールバック関数、イベント リスナー、およびその他の遅延アクションが、JavaScript が実行する準備ができるまで待機する場所です。これらのタスクは列に並んで順番を待ちます。

これは店舗の待機列のようなものだと考えてください。JavaScript が現在のタスクで完了すると、各タスクがイベント ループによって処理されます。

3. コールスタックとは何ですか?

呼び出しスタック は、JavaScript が関数呼び出しを追跡する場所です。関数を呼び出すと、その関数はスタックにプッシュされます。それが終わると、外されます。 JavaScript はスタックに出現する順序でタスクを処理し、本質的に同期的です。

4. イベントループとは何ですか?

イベント ループは、すべてを動かし続ける交通警察官のようなものです。 コールスタックが空かどうかを常にチェックし、空であれば、タスクをタスクキューまたはマイクロタスクキューからスタックに移動して実行します。これにより、JavaScript はメインスレッドをブロックすることなく

非同期コードを処理できるようになります。

イベントループの動作例

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

ここで何が起こるのですか?

細かく見てみましょう:

「終了」は同期であり、コールスタックで実行されるため、すぐにログに記録されます。
2. 100ms の setTimeout は Web API によって処理されます。 100 ミリ秒後、コールバックは タスク キュー
に移動します。
3. 2000 ミリ秒の setTimeout も同じことを行いますが、そのコールバックは 2000 ミリ秒後に タスク キュー
に移動します。
4. イベント ループは、最初に 100 ミリ秒のコールバックを コール スタック
に移動し、次に 2000 ミリ秒のコールバックを移動します。

5. マイクロタスクキューとは何ですか?

マイクロタスク キューは、タスク キューの前に処理されるタスク用の特別なキューです。マイクロタスクは、約束 や突然変異オブザーバーなどから派生します。イベント ループは常に、タスク キューの前に マイクロタスク キュー

をチェックします。

Promise を使用したマイクロタスクの例

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

ここで何が起こるのですか?

「開始」はすぐに記録されます。
2. setTimeout コールバックは タスク キュー
に配置されます。
3. Promise の解決策は マイクロタスク キュー
に配置されます。
「終了」が記録されます。
5. イベント ループは マイクロタスク キュー
をチェックし、Promise コールバックを実行します。
最後に、タスク キューは setTimeout コールバックを処理します。

出力:

Start
End
Promise
Timeout

視覚的表現

すべてをまとめる

すべてがどのように組み合わされるかは次のとおりです:

1. Web API
は、メインスレッド外のタイマーなどの非同期タスクを処理します。
2. イベント ループは、タスクをタスク キューまたはマイクロタスク キューからコール スタック
に移動します。
3. マイクロタスク (Promise など) は、タスクキュー
内のタスクの前に最初に処理されます。

以上がJavaScript のイベント ループを理解する — 簡単になりました!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。