JavaScript イベント ループを理解する (簡単に)

JavaScript イベント ループを理解する (簡単に)

JavaScript の イベント ループ は、JavaScript での非同期プログラミングを可能にします。簡単に説明します！

---

?主要な概念

1.シングルスレッド

JavaScript はシングルスレッドであるため、一度に 1 つのこと しか実行できません。

console.log("Task 1");
console.log("Task 2");

?出力:

Task 1
Task 2

2. 同期と非同期

• 同期タスク: 順番に、次々と実行されます。
• 非同期タスク: メインスレッドをブロックしません。彼らは走る準備ができるまで待ちます。

console.log("Start");

setTimeout(() => {
  console.log("Async Task");
}, 1000);

console.log("End");

?出力:

Start
End
Async Task

---

?イベントループの仕組み

1. コールスタック

   • タスクが 1 つずつ実行される場所。
   • 関数が実行されると、スタックに追加されます。完了すると削除されます。

2. Web API

   • 非同期タスク (setTimeout など) はここで処理されます。彼らはバックグラウンドで待機します。

3. コールバックキュー

   • 非同期タスクが完了すると、そのコールバックがキューに追加されます。

4. イベントループ

   • イベント ループは以下をチェックします。
     1. コールスタックは空です?
     2. YES の場合、コールバック キューからタスクを取得し、スタックにプッシュします。

---

✨ 例: ステップバイステップ

console.log("Start");

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

console.log("End");

1️⃣ コールスタック

Step	Call Stack	Notes
1	console.log	Logs "Start"
2	setTimeout	Registers timeout task
3	console.log	Logs "End"

2️⃣ Web API

• setTimeout は Web API に移動し、タイマーを開始します。

3️⃣ コールバックキュー

• 2000 ミリ秒後、コールバック (() => console.log("Timeout Task")) がキューに移動します。

4️⃣ イベントループ

• イベント ループは、呼び出しスタックが空かどうかをチェックします。
• コールバックはスタックに移動され、実行されます。

?最終出力:

Start
End
Timeout Task

---

?イベントループの視覚化

イベント ループを真に理解するには、次のリソースを確認してください。

• ルーペ
• MDN: 同時実行モデル

コーディングを楽しんでください! ?

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