JavaScript のイベント ループを理解する

JavaScript がシングルスレッド プログラミング言語であることは、おそらくすでにご存知でしょう。これは、JavaScript が Web ブラウザーまたは Node.js の単一のメイン スレッドで実行されることを意味します。単一のメインスレッドで実行するということは、一度に 1 つの JavaScript コードのみを実行することを意味します。

JavaScript のイベント ループは、メイン スレッドでコードがどのように実行されるかを決定する上で重要な役割を果たします。イベント ループは、コードの実行やイベントの収集と処理などを担当します。また、キューに入れられたサブタスクの実行も処理します。

このチュートリアルでは、JavaScript のイベント ループの基本を学びます。

イベントループの仕組み

イベント ループがどのように機能するかを理解するには、3 つの重要な用語を理解する必要があります。

コール スタックは、関数の実行コンテキストを追跡する関数呼び出しのスタックです。スタックは後入れ先出し (LIFO) 原則に従います。これは、最後に呼び出された関数が最初に実行されることを意味します。

キューには、JavaScript によって実行される一連のタスクが含まれます。このキュー内のタスクによって関数が呼び出され、関数がスタックに置かれる可能性があります。キューの処理は、スタックが空の場合にのみ開始されます。キュー内のアイテムは先入れ先出し (FIFO) 原則に従います。これは、最も古いタスクが最初に完了することを意味します。

ヒープは基本的に、オブジェクトが保存および割り当てられる大きなメモリ領域です。その主な目的は、関数によって使用される可能性のあるデータをスタックに保存することです。

基本的に、JavaScript はシングルスレッドであり、一度に 1 つの関数を実行します。この単一関数は

に配置されます。この関数には、スタックの上位に配置される他のネストされた関数を含めることもできます。スタックは LIFO 原則に従っているため、最後に呼び出されたネストされた関数が最初に実行されます。

API リクエストやタイマーなどの非同期タスクは、後で実行するために

に追加されます。 JavaScript エンジンは、アイドル状態のときにキュー内のタスクの実行を開始します。次の例を考えてみましょう:

上記のコードを実行した場合にスタックとキューがどのようになるかを見てみましょう。

関数を呼び出してスタックに置きます。

が実行を完了したことがログに記録されるため、スタックから削除されます。次に、

関数が呼び出され、スタックに配置されます。実行中に、Hello, Team!をログに記録し、helloperson()を呼び出します。helloTeam()の実行はまだ終了していないため、スタック上に残りますが、helloperson()はその上に配置されます。後入れ先出しの原則により、helloperson()がすぐに実行されることが規定されています。これにより、Hello, Monty!がコンソールに記録され、実行が完了し、

がスタックからポップされます。その後、helloTeam()関数がスタックからポップされ、最終的にbyeWorld()に到達します。さようなら、世界! を記録します。そしてスタックから消えます。キューは常に空です。ここで、上記のコードを少し変更したものを考えてみましょう。リーリーここで行った唯一の変更は、

を使用することです。ただし、タイムアウトはゼロに設定されています。したがって、

が

の前に出力されることが期待されます。イベント ループの仕組みを理解していれば、なぜこれが起こらないのかが理解できるでしょう。helloTeam()がスタックにプッシュされると、setTimeout()メソッドが検出されます。ただし、setTimeout()

のhelloperson()への呼び出しはキューに入れられ、実行する同期タスクがなくなると実行されます。byeWorld()への呼び出しが完了すると、イベント ループは保留中のタスクがないかキューをチェックし、helloperson()への呼び出しを見つけます。この時点で、関数が実行され、

がコンソールに記録されます。これは、setTimeout()に指定したタイムアウト期間がコールバックの実行時間を保証するものではないことを示しています。これは、コールバックが実行される最小時間です。Web ページの応答性を維持する

JavaScript の興味深い特徴は、関数が完了するまで実行されることです。これは、関数がスタック上にある限り、イベント ループはキュー内の他のタスクを処理したり、他の関数を実行したりできないことを意味します。これにより、ユーザー入力の処理や DOM 関連の変更など、他の操作を実行できなくなり、Web ページが「ハング」する可能性があります。指定された範囲内の素数の数を求める次の例を考えてみましょう:

関数では、

から

までの数値を反復処理します。各数値について、isPrime()関数を呼び出して、それが素数かどうかを確認します。isPrime()関数自体には、2からMath.sqrt(num)までを実行するforループがあり、数値がは素数です。

查找给定范围内的所有素数可能需要一段时间，具体取决于您使用的值。当浏览器进行此计算时，它无法执行任何其他操作。这是因为 listPrimesInRange()函数将保留在堆栈中，浏览器将无法执行队列中的任何其他任务。

function listPrimesInRangeResponsively(start) { let next = start + 100,000; if (next > end) { next = end; } for (let num = start; num <= next; num++) { if (isPrime(num)) { primeNumbers.push(num); } if (num == next) { percentage = ((num - begin) * 100) / (end - begin); percentage = Math.floor(percentage); progress.innerText = `Progress ${percentage}%`; if (num != end) { setTimeout(() => { listPrimesInRangeResponsively(next + 1); }); } } if (num == end) { percentage = ((num - begin) * 100) / (end - begin); percentage = Math.floor(percentage); progress.innerText = `Progress ${percentage}%`; heading.innerText = `${primeNumbers.length - 1} Primes Found!`; console.log(primeNumbers); return primeNumbers; } } }