ホームページ > 記事 > ウェブフロントエンド > JavaScript での非同期プログラミングを理解する: イベント ループの初心者ガイド
JavaScript コードの一部が順番が狂っているように見える理由を疑問に思ったことはありますか?これを理解するための鍵は、イベント ループです。
JavaScript のイベント ループは、特にさまざまな種類の非同期操作を扱う場合、理解するのが難しい場合があります。この記事では、JavaScript が 同期 と 非同期 コード、マイクロタスク と マクロタスク をどのように処理するか、そして特定のことが起こる理由を詳しく説明します。特定の順序で。
JavaScript は、同期 と 非同期 という 2 つの主な方法で操作を処理します。両者の違いを理解することは、JavaScript がタスクを処理する方法と、効率的でノンブロッキングなコードを作成する方法を理解するための鍵となります。
同期コードは JavaScript のデフォルトであり、各行が順番に次々に実行されることを意味します。例:
console.log("First"); console.log("Second");
これは出力します:
First Second
一方、非同期コードでは、コードの残りの部分をブロックすることなく、特定のタスクをバックグラウンドで実行し、後で完了することができます。 setTimeout() や Promise などの関数は、非同期コードの例です。
setTimeout() を使用した非同期コードの簡単な例を次に示します。
console.log("First"); setTimeout(() => { console.log("Second"); }, 0); console.log("Third");
これは出力します:
First Third Second
JavaScript で非同期操作を処理するには、いくつかの方法があります。
コードサンプル:
console.log("Start"); function asyncTask(callback) { setTimeout(() => { console.log("Async task completed"); callback(); }, 2000); } asyncTask(() => { console.log("Task finished"); }); console.log("End");
コードサンプル:
console.log("Start"); const asyncTask = new Promise((resolve) => { setTimeout(() => { console.log("Async task completed"); resolve(); }, 2000); }); asyncTask.then(() => { console.log("Task finished"); }); console.log("End");
コードサンプル:
console.log("Start"); async function asyncTask() { await new Promise((resolve) => { setTimeout(() => { console.log("Async task completed"); resolve(); }, 2000); }); console.log("Task finished"); } asyncTask(); console.log("End");
これらの JavaScript の実行方法とそれぞれの違いをより深く理解するために、ここでは JavaScript 関数の複数の側面にわたる詳細な違いを説明します。
Aspect | Synchronous Code | Asynchronous Code |
---|---|---|
Execution Order | Executes line by line in a sequential manner | Allows tasks to run in the background while other code continues to execute |
Performance | Can lead to performance issues if long-running tasks are involved | Better performance for I/O-bound operations; prevents UI freezing in browser environments |
Code Complexity | Generally simpler and easier to read | Can be more complex, especially with nested callbacks (callback hell) |
Memory Usage | May use more memory if waiting for long operations | Generally more memory-efficient for long-running tasks |
Scalability | Less scalable for applications with many concurrent operations | More scalable, especially for applications handling multiple simultaneous operations |
This comparison highlights the key differences between synchronous and asynchronous code, helping developers choose the appropriate approach based on their specific use case and performance requirements.
In JavaScript, microtasks and macrotasks are two types of tasks that are queued and executed in different parts of the event loop, which determines how JavaScript handles asynchronous operations.
Microtasks and macrotasks are both queued and executed in the event loop, but they have different priorities and execution contexts. Microtasks are processed continuously until the microtask queue is empty before moving on to the next task in the macrotask queue. Macrotasks, on the other hand, are executed after the microtask queue has been emptied and before the next event loop cycle starts.
Microtasks are tasks that need to be executed after the current operation completes but before the next event loop cycle starts. Microtasks get priority over macrotasks and are processed continuously until the microtask queue is empty before moving on to the next task in the macrotask queue.
console.log("Start"); Promise.resolve().then(() => { console.log("Microtask"); }); console.log("End");
Start End Microtask
Macrotasks are tasks that are executed after the microtask queue has been emptied and before the next event loop cycle starts. These tasks represent operations like I/O or rendering and are usually scheduled after a certain event or after a delay.
console.log("Start"); setTimeout(() => { console.log("Macrotask"); }, 0); console.log("End");
Start End Macrotask
Aspect | Microtasks | Macrotasks |
---|---|---|
Execution Timing | Executed immediately after the current script, before rendering | Executed in the next event loop iteration |
Queue Priority | Higher priority, processed before macrotasks | Lower priority, processed after all microtasks are complete |
Examples | Promises, queueMicrotask(), MutationObserver | setTimeout(), setInterval(), I/O operations, UI rendering |
Use Case | For tasks that need to be executed as soon as possible without yielding to the event loop | For tasks that can be deferred or don't require immediate execution |
イベント ループは、JavaScript がシングルスレッドであるにもかかわらず、ノンブロッキングの非同期操作を可能にする JavaScript の基本的な概念です。非同期コールバックを処理し、時間のかかる操作によって JavaScript がブロックされることなくスムーズに実行し続けることを保証します。
イベント ループは、JavaScript が非同期操作を効率的に処理できるようにするメカニズムです。コール スタックとタスク キュー (またはマイクロタスク キュー) を継続的にチェックして、次にどの関数を実行する必要があるかを決定します。
イベント ループをより深く理解するには、JavaScript が内部でどのように動作するかを知ることが重要です。 JavaScript はシングルスレッド言語であり、一度に 1 つのことしか実行できないことに注意することが重要です。呼び出しスタックは 1 つだけあり、実行される関数が格納されます。これにより同期コードは簡単になりますが、サーバーからのデータの取得やタイムアウトの設定など、完了までに時間がかかるタスクでは問題が発生します。イベント ループがなければ、JavaScript はこれらのタスクを待機したままになり、他には何も起こりません。
コールスタックは、現在実行されている関数が保持される場所です。 JavaScript は、コードを処理するときにコール スタックに関数を追加したり、コール スタックから関数を削除したりします。
setTimeout、fetch、Promise などの非同期タスクが発生すると、JavaScript はそのタスクをブラウザの Web API (タイマー API、ネットワーク API など) に委任し、バックグラウンドでタスクを処理します。
非同期タスクが完了すると (タイマーが終了するか、サーバーからデータが受信されるなど)、コールバック (結果を処理する関数) がタスク キュー (Promise の場合はマイクロタスク キュー) に移動されます。 .
JavaScript は同期コードの実行を継続します。コール スタックが空になると、イベント ループはタスク キュー (またはマイクロタスク キュー) から最初のタスクを取得し、実行のためにコール スタックに配置します。
このプロセスが繰り返されます。イベント ループにより、現在の同期タスクが完了した後にすべての非同期タスクが処理されるようになります。
イベント ループがどのように機能するかをより明確に理解できたので、理解を確実にするためにいくつかの例を見てみましょう。
function exampleOne() { console.log("Start"); setTimeout(() => { console.log("Timeout done"); }, 1000); Promise.resolve().then(() => { console.log("Resolved"); }); console.log("End"); } exampleOne();
Start End Resolved Timeout done
function exampleTwo() { console.log("Start"); setTimeout(() => { console.log("Timer 1"); }, 0); Promise.resolve().then(() => { console.log("Promise 1 Resolved"); setTimeout(() => { console.log("Timer 2"); }, 0); return Promise.resolve().then(() => { console.log("Promise 2 Resolved"); }); }); console.log("End"); } exampleTwo();
Start End Promise 1 Resolved Promise 2 Resolved Timer 1 Timer 2
function exampleThree() { console.log("Step 1: Synchronous"); setTimeout(() => { console.log("Step 2: Timeout 1"); }, 0); Promise.resolve().then(() => { console.log("Step 3: Promise 1 Resolved"); Promise.resolve().then(() => { console.log("Step 4: Promise 2 Resolved"); }); setTimeout(() => { console.log("Step 5: Timeout 2"); }, 0); }); setTimeout(() => { console.log( "Step 6: Immediate (using setTimeout with 0 delay as fallback)" ); }, 0); console.log("Step 7: Synchronous End"); } exampleThree();
Step 1: Synchronous Step 7: Synchronous End Step 3: Promise 1 Resolved Step 4: Promise 2 Resolved Step 2: Timeout 1 Step 6: Immediate (using setTimeout with 0 delay as fallback) Step 5: Timeout 2
In JavaScript, mastering synchronous and asynchronous operations, as well as understanding the event loop and how it handles tasks, is crucial for writing efficient and performant applications.
The examples provided progressively illustrated the interaction between synchronous code, promises, timers, and the event loop. Understanding these concepts is key to mastering asynchronous programming in JavaScript, ensuring your code runs efficiently and avoids common pitfalls such as race conditions or unexpected execution orders.
To ensure you don't miss any part of this series and to connect with me for more in-depth discussions on Software Development (Web, Server, Mobile or Scraping / Automation), push notifications, and other exciting tech topics, follow me on:
Stay tuned and happy coding ???
以上がJavaScript での非同期プログラミングを理解する: イベント ループの初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。