JavaScriptの非同期とは何ですか?用途は何ですか?
この記事では、JavaScript の非同期とは何ですか?用途は何ですか?困っている友人は参考にしていただければ幸いです。
js 非同期とは何ですか?
JavaScript はシングルスレッドであることがわかっていますが、これはその目的に関係しています。ブラウザーのスクリプト言語としての JavaScript の主な目的は、ユーザーと対話して DOM を操作することです。これにより、シングルスレッドのみが可能であることが決まります。そうでない場合は、非常に複雑な同期の問題が発生します。たとえば、JavaScript に同時に 2 つのスレッドがあるとします。1 つのスレッドが特定の DOM ノードにコンテンツを追加し、もう 1 つのスレッドがそのノードを削除するとします。この場合、ブラウザーはどちらのスレッドを使用すればよいでしょうか。
いわゆる「シングル スレッド」とは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了したら、次のタスクが実行されます。
このモードの利点は、実装が比較的簡単で、実行環境が比較的シンプルであることです。欠点は、1 つのタスクに時間がかかると、後続のタスクをキューに入れる必要があり、実行が遅れることです。プログラム全体の。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。
Ajax の同期リクエストはブラウザの UI (ボタン、メニュー、スクロール バーなど) をロックし、すべてのユーザー操作をブロックするため、ブラウザがフリーズします。jquery の Ajax にはこのような同期リクエスト関数を使用する必要があります。特に要求されるデータの量が多い場合には、同期要求の使用を避けてください。
非同期であると感じるために少しだけ注意してください
バックグラウンド インターフェイスは easy-mock を使用します。公式アドレス: https://easy-mock.com/
ajax は axios を使用します。基本的なコードは次のとおりです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript异步</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button>点击</button>
<script>
{
let myData = null
//ajax请求
function ajax() {
axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
.then(data => {
console.log("ajax返回成功");// handle success
myData = data.data
console.log(myData);
})
.catch(error => {
// console.log(error); // handle error
console.log("ajax返回失败");
})
}
}
</script>
</body>
</html>いくつかの js を追加して効果を見てみましょう。
Asynchronous-Timer
console.log(myData);
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);出力には、不安はありません
//null //null //定时器
実行順序:
最初の 1 つを最初に実行します console.log(myData);
その後、タイマーが発生し、タイマーが一時停止されます (つまり、タイマーは一時停止されます)
2 番目の console.log(myData);# を実行し続けます。 ##js コードは何も実行できません。戻って、中断されたタスクの実行を続行します。
次のチェストを見てください
console.log(myData);
ajax()
console.log(myData);
ログイン後にコピー
出力を見てください。まだサスペンスはありません
console.log(myData); ajax() console.log(myData);
//null
//null
//ajax返回成功
//{success: true, data: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注) 2 つの栗を組み合わせて、
console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);これは実際、別の知識ポイントである
タスク キューとイベント ループにつながるとも言えます。
メイン スレッドの外側にもタスク キューがあり、タスク キューには非同期で実行する必要があるコンテンツが格納されます。
メイン スレッドの実行が終了すると、タスク キューがクリアされるまで実行されます (継続的にスキャンを繰り返します)
このコードを確認してください
//null
//null
//ajax返回成功
//{success: true, data: {…}}
//定时器見てください。別のコード部分で
console.log(1);
setTimeout(function () {
console.log(2);
}, 1000);
console.log(3);出力: 2、1、これはなぜですか?
console.log(2); メインスレッドでは、最初に実行され、##setTimeout(function(){console.log(1);}, 0); # のみ タスク キューの内容は、メイン スレッドの実行が完了するまで実行されません。
メイン スレッドのタスクが実行された後、タスク キューの内容を継続的にスキャンする必要があるのはなぜですか?
このコードを見ると、理解するのに役立ちます
setTimeout(function(){console.log(1);}, 0);
console.log(2);出力を見てください:
console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);
const btn = document.querySelector('button')
btn.onclick = () => {
console.log("点击了");
}これで、メインスレッドがループでタスク キューをスキャンする理由が理解できますか?
イベント ループの各ラウンドはティックと呼ばれます (vue の nextTick を思い浮かべますか?)ユーザー インタラクションが発生したとき (マウス クリック イベント、ページ スクロール イベント、ウィンドウ サイズ変更イベントなど)、ajax、タイマーやタイマーなどは、イベント ループ内のタスク キューにイベントを追加し、実行を待ちます。
- ネットワーク リクエスト: Ajax リクエスト、img イメージの動的読み込み
- イベント バインディングまたは DOM イベント (クリック イベントなど)、いつクリックされたかはわかりませんが、クリックされる前にどうすればよいですか。 addEventListener でイベントの種類を登録すると、ブラウザにはこれを受け取るための別のモジュールがあり、イベントがトリガーされると、ブラウザの特定のモジュールが実行スタックに対応する関数を非同期キューにスローします。空の場合、この関数は直接実行されます。
- ES6 での約束
- 非同期が必要な場合:
- #待機中にアラートなどプログラムをブロックできない場合
- したがって、すべての「待機状況」は非同期である必要があります
- 一言で言えば、待機する必要があるがプログラムをブロックできない場合には、非同期
- を使用する必要があります。
非同期と並列
非同期と並列を混同しないでください。
非同期はシングルスレッド、並列はマルチスレッドです
非同期: メインスレッドのタスクは、メインスレッドのタスクが同期された後にのみ同期されます。実行が完了すると、タスク キュー内の非同期タスクは順番に実行されますか?
Parallel: 2 つ以上のイベント チェーンが時間の経過とともに交互に実行されるため、より高いレベルからは同時に実行されているように見えます (ハンドルのみですが)。常に 1 つのイベント)
以上がJavaScriptの非同期とは何ですか?用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7493
15
1377
52
77
11
19
41
C++ 関数を使用して非同期プログラミングを実装するにはどうすればよいですか?
Apr 27, 2024 pm 09:09 PM
概要: C++ の非同期プログラミングを使用すると、時間のかかる操作を待たずにマルチタスクを行うことができます。関数ポインターを使用して、関数へのポインターを作成します。コールバック関数は、非同期操作が完了すると呼び出されます。 boost::asio などのライブラリは、非同期プログラミングのサポートを提供します。実際のケースでは、関数ポインターと boost::asio を使用して非同期ネットワーク リクエストを実装する方法を示します。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
golang フレームワークは同時実行性と非同期プログラミングをどのように処理しますか?
Jun 02, 2024 pm 07:49 PM
Go フレームワークは Go の同時実行性と非同期機能を使用して、同時タスクと非同期タスクを効率的に処理するためのメカニズムを提供します。 1. 同時実行性は Goroutine によって実現され、複数のタスクを同時に実行できます。 2. 非同期プログラミングはチャネルを通じて実装されます。メインスレッドをブロックせずに実行可能。 3. HTTP リクエストの同時処理、データベース データの非同期取得などの実用的なシナリオに適しています。
Java フレームワークでの非同期プログラミングにおける一般的な問題と解決策
Jun 04, 2024 pm 05:09 PM
Java フレームワークでの非同期プログラミングにおける 3 つの一般的な問題と解決策: コールバック地獄: Promise または CompletableFuture を使用して、より直感的なスタイルでコールバックを管理します。リソースの競合: 同期プリミティブ (ロックなど) を使用して共有リソースを保護し、スレッドセーフなコレクション (ConcurrentHashMap など) の使用を検討します。未処理の例外: タスク内の例外を明示的に処理し、例外処理フレームワーク (CompletableFuture.Exceptionally() など) を使用して例外を処理します。
JavaScript で HTTP ステータス コードを簡単に取得する方法
Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
PHP での非同期プログラミングの長所と短所は何ですか?
May 06, 2024 pm 10:00 PM
PHP での非同期プログラミングの利点には、スループットの向上、待ち時間の短縮、リソース使用率の向上、およびスケーラビリティが含まれます。欠点としては、複雑さ、デバッグの難しさ、ライブラリのサポートの制限などが挙げられます。実際のケースでは、WebSocket 接続の処理に ReactPHP が使用され、非同期プログラミングの実際的な応用例が示されています。
Python 非同期プログラミング: 非同期コードで効率的な同時実行性を実現する方法
Feb 26, 2024 am 10:00 AM
1. 非同期プログラミングを使用する理由は何ですか?従来のプログラミングではブロッキング I/O が使用されます。つまり、プログラムは操作が完了するまで待機してから続行します。これは単一のタスクではうまく機能する可能性がありますが、多数のタスクを処理する場合にはプログラムの速度が低下する可能性があります。非同期プログラミングは、従来のブロッキング I/O の制限を破り、非ブロッキング I/O を使用します。つまり、プログラムは、タスクの完了を待たずに、タスクを別のスレッドまたはイベント ループに分散して実行できます。これにより、プログラムは複数のタスクを同時に処理できるようになり、プログラムのパフォーマンスと効率が向上します。 2. Python 非同期プログラミングの基礎 Python 非同期プログラミングの基礎は、コルーチンとイベント ループです。コルーチンは、関数の一時停止と再開を切り替えることができる関数です。イベントループはスケジュールを担当します
Python 非同期プログラミング: 非同期プログラミングの本質を明らかにし、コードのパフォーマンスを最適化します。
Feb 26, 2024 am 11:20 AM
非同期プログラミング、英語の Asynchronous Programming とは、プログラム内の特定のタスクを、他のタスクの完了を待たずに同時に実行でき、それによってプログラムの全体的な動作効率が向上することを意味します。 Python では、asyncio モジュールは非同期プログラミングを実装するための主要なツールであり、コルーチン、イベント ループ、および非同期プログラミングに必要なその他のコンポーネントを提供します。コルーチン: コルーチンは、スレッドと同様に実行を一時停止してから再開できる特別な関数ですが、コルーチンはスレッドよりも軽量で、消費するメモリも少なくなります。コルーチンは async キーワードで宣言され、実行は await キーワードで一時停止されます。イベント ループ: イベント ループ (EventLoop) は非同期プログラミングの鍵です
