Happy file JavaScript 非同期プログラミング

JavaScript 非同期プログラミング

非同期の概念

非同期プログラミングを使用する場合

非同期の概念

非同期（async）は、同期（Synchronous、sync）の反対の概念です。

私たちが研究した従来のシングルスレッドプログラミングでは、プログラムの実行は同期です (同期とは、すべてのステップが同時に実行されることを意味するのではなく、ステップが制御フローシーケンス内で順番に実行されることを意味します)。非同期の概念は同期を保証するものではなく、非同期処理の実行は元のシーケンスと順序関係を持たなくなります。

簡単に理解すると、同期はコードの順序で実行され、非同期実行はコードの順序ではなく、非同期実行の方が効率的です。

以上が非同期の概念の説明ですが、次に非同期を簡単に説明すると、非同期とはメインスレッドからサブスレッドを起動してタスクを完了させることです。

非同期プログラミングを使用する場合

フロントエンドプログラミング (バックエンドでも同様の場合があります) では、1 + 1 の結果の計算など、短くて高速な操作を処理する場合、多くの場合、メインスレッドで完了できます。スレッドとして、メインスレッドは同時に複数のリクエストを受け入れることができません。したがって、イベントが終了しない場合、インターフェイスは他のリクエストを処理できなくなります。

ここにボタンがありますが、その onclick イベントを無限ループに設定すると、ボタンが押されたときに Web ページ全体が応答しなくなります。

このような事態を避けるために、大きなファイルの読み取りやネットワークリクエストの作成など、ユーザーが気づくまでに時間がかかる可能性のある処理を完了するには、子スレッドを使用することがよくあります。子スレッドはメインスレッドから独立しているため、ブロックされてもメインスレッドの動作には影響しません。ただし、サブスレッドには制限があり、一度起動するとメインスレッドとの同期が失われるため、終了を判断することができず、サーバーからの情報の処理など、終了後に何か処理が必要な場合はマージできません。それをメインスレッドに追加します。

この問題を解決するために、JavaScript の非同期操作関数では、コールバック関数を使用して非同期タスクの結果を処理することがよくあります。

折り返し電話

コールバック関数は、非同期タスクを開始するときに、タスクの完了後に何をするかを通知する関数です。このように、メインスレッドは非同期タスクのステータスをほとんど気にする必要がなく、メインスレッドは自動的に開始および終了します。

例

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

このプログラムのsetTimeoutは長時間(3秒)かかる処理です。第一引数はコールバック関数、第二引数はミリ秒です。この関数の実行後、子スレッドが生成され、子スレッドは 3 秒間待機してから、コールバック関数「print」を実行し、コマンドラインに「RUNOOB!」を出力します。

もちろん、JavaScript の構文は非常に使いやすいので、別の関数 print を定義する必要はなく、上記のプログラムを次のように記述することがよくあります。

例

setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

**注意:** setTimeout は子スレッドで 3 秒待機するため、setTimeout 関数の実行後にメインスレッドは停止しません。そのため、次のようになります。

例

setTimeout(function () {
    document.getElementById("demo1").innerHTML="RUNOOB-1!";
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";
console.log("2");

このプログラムの実行結果は次のようになります。


RUNOOB-1!
RUNOOB-2!

非同期 AJAX

setTimeout 関数に加えて、非同期コールバックは AJAX プログラミングで広く使用されています。AJAX の詳細については、https: //www.kxdang.com/topic//ajax/ajax-tutorial.htmlを参照してください。

XMLHttpRequest は、リモートサーバーから XML または JSON データをリクエストするためによく使用されます。標準の XMLHttpRequest オブジェクトには、複数のコールバックが含まれることがよくあります。

例

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.kxdang.com/topic//try/ajax/ajax_info.txt", true);
xhr.send();

XMLHttpRequest の onload 属性と onerror 属性は、それぞれリクエストが成功した場合と失敗した場合に呼び出される関数です。完全な jQuery ライブラリを使用する場合は、非同期 AJAX をよりエレガントに使用することもできます。

例

$.get("https://www.kxdang.com/topic//try/ajax/demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

Happy file JavaScript 非同期プログラミング

JavaScript 非同期プログラミング

おすすめ