イベントループの非同期

@serverSerrverlesskiy

非同期

JavaScriptでは、非同期はWebページのロードと並行してリクエストを処理する主要なツールです。今では、サーバーへのすべての要求がページのリロードで送信されるインターネットを想像することは不可能です。

サーバーからのデータはすべて非同期でリクエストされます。リクエストが送信され（XMLHttpRequestまたはXHR）、コードはその戻りを待たずに、実行を継続します。サーバーが応答すると、XHRオブジェクトに通知され、要求を送信する前に渡されたcallback関数を起動します。

言語ツールを正しく使用すると、1つのスレッドで連続して発生するリクエストの実行は、イベントの受信とそれに反応することを妨げることはありません-人は、ラグやクラッシュに気付かずに、インターフェースを静かに操作しますとフリーズします。

Event loop

Queue

JavaScriptの「イベントループ」は非同期のコールマネージャーです。

このトリッキーなプロセスをスムーズに機能させるために、JavaScriptはコード実行の順序を制御するメカニズムを実装しています。これはシングルスレッド言語であるため、現在の実行コンテキストに「くさび」する必要がありました。このメカニズムは「イベントループ」と呼ばれ、イベントサイクルです。

英語から「loop」は「loop」と翻訳されます。これは、ループされたキューを処理しているという意味を完全に反映しています。

イベントループは、コンテキストの実行順序（スタック）を調整します。イベントが発生したとき、または関数が⚙️と呼ばれたときに生成されます。イベントへの反応は、実行キューの「イベントループ」に配置されます。このループは、サイクルごとに、それに入るコードを順番に実行します。この場合、イベント⚙️にバインドされた関数は、現在の実行コンテキストの次に呼び出されます。

JavaScriptでは、同期および非同期の実行キューが常に実行されています。同期-stack-キューを形成し、非同期に転送します-eventloop-現在スケジュールされている実行可能コンテキストの後に実行される関数呼び出し⚙️。

データを一貫した状態にするには、各関数⚙️を最後まで実行する必要があります。これは、JavaScriptのシングルスレッドと、関数型プログラミング言語の特徴であるクロージャーなどの他の機能によるものです。したがって、唯一のスレッドは実行コンテキストのキューとして表され、イベントループを通過した関数⚙️の「ウェッジ」が実行されます。

説明

JavaScriptはシングルスレッド言語です。一度に実行できるタスクは1つだけです。通常、これは難しいことではありませんが、30秒かかるタスクを実行していると想像してください...はい。このタスクの間、他のことが起こる前に30秒待機します（JavaScriptはデフォルトでメインブラウザースレッドで実行されるため、UI全体が待機します）2021年です。

幸い、ブラウザには、JavaScriptエンジン自体にはない機能がいくつか用意されています。それはWebAPIです。これには、DOM API、setTimeout、HTTPリクエストなどが含まれます。これは、非同期の非ブロッキング動作を作成するのに役立ちます。

関数を呼び出すと、それは呼び出しスタックに追加されます。コールスタックはJSエンジンの一部であり、ブラウザから独立しています。これはスタックの古典的なビューです。つまり、「ファーストイン」、「ラストアウト」です。関数が値を返すと、スタックから「ポップ」されます。

function great() {
  return 'Hello'
}

function respond() {
  return setTimeout(() => alert('Hey!'), 1000)
}

great()
respond()

stack

respond関数はsetTimeout関数を返します。 SetTimeoutはWeb-APIを介して提供されます。これにより、メインスレッドをブロックすることなくタスクを分割できます。 setTimeout関数に渡したCallback関数、ラムダ関数 （）=>{return'Hey'}がWeb-APIに追加されます。その間、setTimeoutとrespondeはスタックからポップされ、それらの値を返します。

timer

Web-APIでは、タイマーは、渡された2番目の引数が1000ms待機するまで実行されます。 Callbackはすぐにはコールスタックに追加されませんが、キューと呼ばれるものに渡されます。

queue

これは混乱を招く可能性があります。1000ms後にcallback関数がコールスタックに追加される（つまり値を返す）という意味ではありません。 1000ms後にキューに追加されるだけです。ただし、このキューでは、関数は順番が来るまで待機する必要があります。

これが私たち全員が待ち望んでいた部分です...イベントループが1つのことを実行する時間です。キューをコールスタックに接続します。呼び出しスタックが空の場合、つまり、以前に呼び出されたすべての関数がそれらの値を返し、スタックからポップされた場合、キューの最初の項目が呼び出しスタックに追加されます。この場合、他の関数は呼び出されませんでした。つまり、 callback関数がキューの最初の要素になるまでに、呼び出しスタックは空でした。

qtoc

callbackはコールスタックに追加され、呼び出されて返され、スタックからポップされます。

result

見るのは楽しいですが、何度も何度も作業しなければ、トピックを完全に理解することはできません。次のコマンドを実行すると、コンソールに何が表示されるかを理解してください。

const foo = () => console.log('First')
const bar = () => setTimeout(() => console.log('Second'), 500)
const baz = () => console.log('Third')

bar()
foo()
baz()

このコードをブラウザで実行するとどうなるか見てみましょう。

setTimeout関数を返すbarを呼び出します。 setTimeoutに渡したCallbackがWebAPIに追加され、setTimeout関数とbarがコールスタックからポップされます。

タイマーが開始し、その間に fooが呼び出され、Firstがログに記録されます。 fooはundefinedを返し、 bazが呼び出され、callbackがキューに追加されます bazはThirdをログに記録します。イベントループは、 bazが戻った後、コールスタックが空であることを確認します。その後、コールバックがコールスタックに追加されます。 コールバックはSecondを記録します。

これにより、「イベントループ」に自信が持てるようになることを願っています。

これがまだ混乱しているように思われる場合でも心配しないでください。最も重要なことは、特定のエラーまたは特定の動作がどこから発生する可能性があるかを理解することです。