JavaScript の非同期操作: イベント ループ

はじめに
JavaScript はデフォルトで同期です
同期操作と非同期操作
イベントループ
仕組み
イベントループの重要性
結論

導入

これを想像してみてください。サーバーからデータを取得し、ユーザー インターフェイスを更新し、すべてのユーザー アクションにリアルタイムで応答する必要がある Web アプリケーションを開発したところですが、コードがこれらのタスクを効率的にやりくりできるようになります。まあ、心配する必要はありません。ここでイベント ループが登場します。

この記事では、イベント ループの仕組み、JavaScript の同期操作と非同期操作の違い、必要なノンブロッキング アーキテクチャとしてのイベント ループの重要性について説明します。

JavaScript はデフォルトで同期します

デフォルトでは、JavaScript は同期であり、コードは上から下の順序で順番に読み取られます。 JS はシングルスレッドであるため、各タスクは次のタスクに進む前に、前のタスクの完了を待つ必要があります。これが意味するのは、コードの各行が一度に 1 つずつ処理され、常に 1 つの操作/関数だけが実行されるということです。

JavaScript では、複数のコードを並行して実行する方法がなく、コアが同期でシングルスレッドである言語で並列処理を行う試みは野心的です。 JavaScript の同期の性質を理解すると、Web アプリケーションがユーザー インタラクションにどのように応答し、タスクを処理するかを理解するのに役立ちます。

function greet(name) {
    return `Hello, ${name}!`;
}

const greeting = greet("Deb");
console.log(greeting);                                                 

この例では、JavaScript は書かれた順序でコードを実行します。 「greet」関数は引数「Deb」を使用して呼び出されます。次に、この関数は挨拶文字列を返し、それがコンソールに記録されます。

出力:

Hello, Deb!

各行は、前の行が完了するまで待ってから実行します。したがって、結果を「挨拶」に割り当てる前に関数を完了する必要があります。

同期操作と非同期操作

イベント ループとは何かについて説明する前に、非同期操作とは何か、また JavaScript における同期操作と非同期操作の違いについて少し触れておきます。非同期操作は、プログラム フローとは独立して実行されるアクティビティです。

前述したように、JavaScript はデフォルトで同期しており、同期コードは各タスク/関数が次のタスク/関数が開始される前に終了する必要があるというブロック動作を作成します。

一方、非同期操作は後続の操作の実行をブロックせず、JavaScript がその特定の非同期タスクの完了を待機している間に他のタスクを処理できるようにします。簡単に言うと、関数を非同期 (async) として宣言すると、その関数には完了までに時間がかかるコードが含まれており、同期コードが最初に実行される間、そのような関数は延期されることになります。

ブロックがないため、前の非同期コードを終了することなく次の同期コードを実行でき、実行準備ができている非同期コードはイベント キューに入れられます。

// Synchronous code
console.log("Step 1");
console.log("Step 2");

同期コードは 1 行ずつ実行されることに注意してください。ここで、JavaScript は記述された順序でステートメントを実行します。

出力:

Step 1
Step 2

一方、非同期コードを使用すると、操作が完了するまで JavaScript が実行を継続できます。

// Asynchronous code
console.log("1st Function");

setTimeout{function(){ // WEB API
  console.log("2nd Function");
},2000);

console.log("3rd Function");

出力:

1st Function
3rd Function
2nd Function

最初と 3 番目の関数は同期しているため、最初に実行され、2 番目の関数はコール スタックから削除され、Web API によって処理されます。 Web API は、イベント キューに入れる前に 2000 ミリ秒待機するように非同期的に命令します。その後、イベント ループによって空のコール スタックに戻され、最終的に実行されます。

イベントループ

最も単純な定義では、イベント ループは非同期イベントを同期的に処理する方法です。

より詳しく定義すると、イベント ループは、必要に応じて非同期操作を実行できるようにする、JavaScript ランタイムで継続的に実行されるコード ループです。これは、JavaScript の制限された設計で多くのタスクを効率的に処理できることを意味します。

特定の JavaScript タスクを実行するまで、コード バックグラウンドで回転して留まります。たとえば、クリック イベント ハンドラーからコードが関連付けられているボタンをクリックしたとき、または外部ファイルを読み込んだとき、このような場合、イベント ループは JavaScript ランタイムの内部に残り、必要に応じて JavaScript コードを実行します。

これが意味するのは、JavaScript はシングルスレッドであるにもかかわらず、イベント ループにより、JavaScript は API にオフロードし、受信したイベントを可能なときに処理することで、非同期的に実行できるように見えるということです。

イベント ループがどのように機能するかを説明する前に、JavaScript ランタイム内で理解する必要がある特定の概念がいくつかあります。

• コール スタック: コール スタックは、どの関数が呼び出され、どの順序で実行されるかを追跡します。同期コードを順番に実行します。

• Web API: これらは、非同期タスクを処理するツールです。

• コールバック: これは、引数として別の関数に渡される関数です。イベントに応答してコードを実行するのに役立ちます。

• イベント/コールバック キュー: コール スタックがクリアされると、実行を待機しているタスクが保持されます。

仕組み

コールスタックは空になるまで同期コードを実行します。非同期コードがコール スタックに追加されると、API に転送され、イベント キューに送信される前にタスクが処理されます。

API によって完了したコールバック/関数はイベント キューに追加され、イベント ループは常にイベント キュー内を調べて、JavaScript が動作する必要がある新しいイベント/タスクがあるかどうかを確認します。

JavaScript はコールスタックが空になるまでイベントを処理できないことに注意してください。したがって、コール スタックが空になると、イベント ループはキューからイベントを取得し、それをコール スタックに配置して、他の通常の関数と同様に実行されます。

イベントループの重要性

• バックグラウンドでタスクを実行している間、コードの応答性を維持します。

• コールスタックとコールバックキューを監視することで、タスクを効果的に管理するのに役立ちます。

• 複数のタスクを同時に処理できるノンブロッキング操作を実行するための JavaScript の回避策を提供します。

• プログラムがコールバック地獄に陥るのを防ぎます。コールバック地獄は、複数のコールバックが相互にネストされている場合に発生し、コードの読み取りや保守が困難になります。

結論

イベント ループの動作によって、アプリケーション内のコードがいつ実行されるかが決まります。イベント ループの使用とその必要性に関する知識が増えるほど、コードが実行されるときになぜ実行されるのかをより理解できるようになります。

コーディングを頑張ってください!

以上がJavaScript の非同期操作: イベント ループの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。