この記事では、JavaScript の非同期とは何ですか?用途は何ですか?困っている友人は参考にしていただければ幸いです。
JavaScript はシングルスレッドであることがわかっていますが、これはその目的に関係しています。ブラウザーのスクリプト言語としての JavaScript の主な目的は、ユーザーと対話して DOM を操作することです。これにより、シングルスレッドのみが可能であることが決まります。そうでない場合は、非常に複雑な同期の問題が発生します。たとえば、JavaScript に同時に 2 つのスレッドがあるとします。1 つのスレッドが特定の DOM ノードにコンテンツを追加し、もう 1 つのスレッドがそのノードを削除するとします。この場合、ブラウザーはどちらのスレッドを使用すればよいでしょうか。
いわゆる「シングル スレッド」とは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了したら、次のタスクが実行されます。
このモードの利点は、実装が比較的簡単で、実行環境が比較的シンプルであることです。欠点は、1 つのタスクに時間がかかると、後続のタスクをキューに入れる必要があり、実行が遅れることです。プログラム全体の。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。
Ajax の同期リクエストはブラウザの UI (ボタン、メニュー、スクロール バーなど) をロックし、すべてのユーザー操作をブロックするため、ブラウザがフリーズします。jquery の Ajax にはこのような同期リクエスト関数を使用する必要があります。特に要求されるデータの量が多い場合には、同期要求の使用を避けてください。
非同期であると感じるために少しだけ注意してください
バックグラウンド インターフェイスは easy-mock を使用します。公式アドレス: https://easy-mock.com/
ajax は axios を使用します。基本的なコードは次のとおりです
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
いくつかの js を追加して効果を見てみましょう。
1 2 3 4 5 |
|
出力には、不安はありません
1 2 3 |
|
実行順序:
最初の 1 つを最初に実行します console.log(myData);
その後、タイマーが発生し、タイマーが一時停止されます (つまり、タイマーは一時停止されます)
2 番目の console.log(myData);# を実行し続けます。 ##js コードは何も実行できません。戻って、中断されたタスクの実行を続行します。
次のチェストを見てください
1 2 3 |
|
1 2 3 4 |
|
2 つの栗を組み合わせて、
1 2 3 4 5 6 |
|
これは実際、別の知識ポイントである
タスク キューとイベント ループにつながるとも言えます。
このコードを確認してください
1 2 3 4 5 |
|
見てください。別のコード部分で
1 2 3 4 5 |
|
出力: 2、1、これはなぜですか?
console.log(2); メインスレッドでは、最初に実行され、##setTimeout(function(){console.log(1);}, 0); # のみ タスク キューの内容は、メイン スレッドの実行が完了するまで実行されません。
メイン スレッドのタスクが実行された後、タスク キューの内容を継続的にスキャンする必要があるのはなぜですか?
このコードを見ると、理解するのに役立ちます
1 2 |
|
1 2 3 4 5 6 7 8 9 10 |
|
これで、メインスレッドがループでタスク キューをスキャンする理由が理解できますか?
イベント ループの各ラウンドはティックと呼ばれます (vue の nextTick を思い浮かべますか?)ユーザー インタラクションが発生したとき (マウス クリック イベント、ページ スクロール イベント、ウィンドウ サイズ変更イベントなど)、ajax、タイマーやタイマーなどは、イベント ループ内のタスク キューにイベントを追加し、実行を待ちます。
非同期と並列を混同しないでください。
非同期はシングルスレッド、並列はマルチスレッドです
非同期: メインスレッドのタスクは、メインスレッドのタスクが同期された後にのみ同期されます。実行が完了すると、タスク キュー内の非同期タスクは順番に実行されますか?
Parallel: 2 つ以上のイベント チェーンが時間の経過とともに交互に実行されるため、より高いレベルからは同時に実行されているように見えます (ハンドルのみですが)。常に 1 つのイベント)
以上がJavaScriptの非同期とは何ですか?用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。