JavaScriptイベントループ-jsチュートリアル-php.cn

JavaScriptイベントループ

王林

リリース： 2024-08-28 06:10:06

オリジナル

1114 人が閲覧しました

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

JavaScript におけるイベントループは、ノンブロッキング I/O を使用してコード、イベント、またはメッセージの実行を制御するメカニズムです。これにより、JavaScript でノンブロッキング、つまり非同期の操作を行う方法が提供されます。

主要な概念

1.シングルスレッド
JavaScript はシングルスレッドです。つまり、一度に 1 つのタスクを実行します。シングルスレッドなので、JavaScript が実行される 1 つのスレッドがいわゆる「メインスレッド」となります。

2.コールスタック
これは、JavaScript が関数呼び出しを追跡するデータ構造です。関数呼び出しはスタックにプッシュされます。戻ってくると削除されます。空の場合、JavaScript は次の処理を行う準備ができています。一般に「メインスレッド」とも呼ばれます。

3.ヒープ
これは、JavaScript がオブジェクトと変数を保存する場所です。これは動的メモリ割り当てに使用されます。

4.イベントキュー
実行を待っているメッセージまたはタスクのキュー。タスクがキューに追加されると、呼び出しスタックが空になるまで待機して実行されます。

5.イベントループ
コールスタックとイベントキューを常に監視するものです。呼び出しスタックが空の場合、タスクをイベントキューから呼び出しスタックに移動し、実行します。

JavaScript Event Loop

プロセス

コードの実行: JavaScript がコードの実行を開始すると、関数呼び出しがコールスタックにプッシュされます。さらに、関数を次々と実行します。
非同期操作: setTimeout やネットワークリクエストのように、操作が非同期になると、JavaScript は実行をブロックしません。代わりに、その操作を Web API、たとえばブラウザのタイマーや HTTP リクエストを処理するサービスに転送します。
コールバック関数: 非同期操作が完了すると、そのコールバック関数がイベントキューにプッシュされます。
イベントループチェック: イベントループは、オーダー内のイベントキューだけでなくコールスタックもチェックするようになりました。コールスタックが空の場合、イベントキューから最初のタスクを選択し、それをコールスタックにプッシュして実行します。

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 1000);

setTimeout(() => {
  console.log('Timeout 2');
}, 500);

console.log('End');

ログイン後にコピー

次のことが段階的に行われることに注意してください:

開始は同期操作であるため、すぐにログに記録されます。
最初の setTimeout は 1000 ミリ秒の遅延で登録され、その後 Web API に送られます。そのコールバックは 1000 ミリ秒後にイベントキューに入れられます。
2 番目の setTimeout は 500 ミリ秒の遅延で登録され、Web API に送信されます。そのコールバックは 500 ミリ秒後にイベントキューに入れられます。
同期なので終了はすぐに記録されます。
500 ミリ秒で、2 番目の setTimeout のコールバックがイベントキューからコールスタックに移動し、タイムアウト 2 を記録します。
setTimeout の最初のレートは、イベントキューからコールスタックまで 1000 ミリ秒で行われ、タイムアウト 1 がログに記録されます。