イベントループの非同期
非同期
JavaScriptでは、非同期はWebページのロードと並行してリクエストを処理する主要なツールです。今では、サーバーへのすべての要求がページのリロードで送信されるインターネットを想像することは不可能です。
サーバーからのデータはすべて非同期でリクエストされます。リクエストが送信され(XMLHttpRequestまたはXHR)、コードはその戻りを待たずに、実行を継続します。サーバーが応答すると、XHRオブジェクトに通知され、要求を送信する前に渡されたcallback
関数を起動します。
言語ツール を正しく使用すると、1つのスレッドで連続して発生するリクエストの実行は、イベントの受信とそれに反応することを妨げることはありません-人は、ラグやクラッシュに気付かずに、インターフェースを静かに操作しますとフリーズします。
Event loop
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()
respond
関数はsetTimeout
関数を返します。 SetTimeout
はWeb-API
を介して提供されます。これにより、メインスレッドをブロックすることなくタスクを分割できます。 setTimeout
関数に渡したCallback
関数、ラムダ関数 ()=>{return'Hey'}
がWeb-API
に追加されます。 その間、setTimeout
とresponde
はスタックからポップされ、それらの値を返します。
Web-API
では、タイマーは、渡された2番目の引数が1000ms待機するまで実行されます。 Callback
はすぐにはコールスタックに追加されませんが、キューと呼ばれるものに渡されます。
これは混乱を招く可能性があります。1000ms後にcallback
関数がコールスタックに追加される(つまり値を返す)という意味ではありません。 1000ms後にキューに追加されるだけです。ただし、このキューでは、関数は順番が来るまで待機する必要があります。
これが私たち全員が待ち望んでいた部分です...イベントループ
が1つのことを実行する時間です。キューをコールスタックに接続します。呼び出しスタックが空の場合、つまり、以前に呼び出されたすべての関数がそれらの値を返し、スタックからポップされた場合、キューの最初の項目が呼び出しスタックに追加されます。この場合、他の関数は呼び出されませんでした。つまり、 callback
関数がキューの最初の要素になるまでに、呼び出しスタックは空でした。
callback
はコールスタックに追加され、呼び出されて返され、スタックからポップされます。
見るのは楽しいですが、何度も何度も作業しなければ、トピックを完全に理解することはできません。 次のコマンドを実行すると、コンソールに何が表示されるかを理解してください。
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
を記録します。
これにより、「イベントループ」に自信が持てるようになることを願っています。
これがまだ混乱しているように思われる場合でも心配しないでください。最も重要なことは、特定のエラーまたは特定の動作がどこから発生する可能性があるかを理解することです。
問題?
に書き込む Discord または電報 チャット, また、私たちの購読 ニュース
質問:
非同期は次のとおりです。
- 同期スレッドからの関数の実行コンテキストを表示するツール
- コードを1行ずつ実行するツール
- Webページの読み込みと並行してリクエストを処理するツール
非同期コールマネージャー:
スタック
イベントループ
JavaScript
関数呼び出しは次の場所に配置されます。
- スタック
- 束
- ループ
ミリ秒単位の遅延でコードを実行するツール:
1.遅延
2.ヒープ
3. setTimeout
このレッスンでどれだけ学んだかを理解するために、モバイルアプリ このトピックに関する私たちの学校。
リンク:
- JavaScriptでEventLoopがどのように機能するかを説明する
- JavaScriptでイベントループを制御する方法
- Справочник javascript
- 記事:レンダリングで説明されたJavascriptイベントループ
- 記事:JavaScriptの視覚化:Promises&Async / Await
Contributors ✨
Thanks goes to these wonderful people (emoji key):
AlisaNasibullina | Dmitriy Vasilev 💵 | Resoner2005 🐛 🎨 |