JavaScript言語の実行環境は「シングルスレッド」であることはご存知かと思います。
いわゆる「シングルスレッド」とは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了したら、次のタスクが実行されます。
このモードの利点は、実装が比較的簡単で、実行環境が比較的シンプルであることです。欠点は、1 つのタスクに時間がかかると、後続のタスクをキューに入れる必要があり、実行が遅れることです。プログラム全体の。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。
この問題を解決するために、JavaScript 言語ではタスクの実行モードを同期 (Synchronous) と非同期 (Asynchronous) の 2 種類に分けています。
「同期モード」は、前の段落で説明したモードであり、後者のタスクは、前のタスクの終了を待ってから実行されます。「非同期モード」は、プログラムの実行順序が一致しており、タスクの順序と同期しています。各タスクには 1 つ以上のコールバック関数 (callback) があり、前のタスクが終了すると次のタスクは実行されませんが、前のタスクの終了を待たずに後のタスクが実行されます。プログラムの実行順序に一貫性がなく、タスクの順序と非同期です。
「非同期モード」は非常に重要です。ブラウザー側では、ブラウザーが応答しなくなることを避けるために、長時間実行される操作を非同期で実行する必要があります。その最良の例は Ajax 操作です。サーバー側では、実行環境がシングルスレッドであるため、すべての http リクエストの同期実行が許可されると、サーバーのパフォーマンスが急激に低下し、すぐに応答が失われます。
この記事では、「非同期モード」プログラミングの 4 つの方法をまとめています。これらを理解すると、より合理的な構造で、パフォーマンスが向上し、メンテナンスが容易な Javascript プログラムを作成できるようになります。
1. コールバック関数
これは、非同期プログラミングの最も基本的な方法です。
f1 と f2 という 2 つの関数があり、後者は前者の実行結果を待つとします。
f1();
f2();
f1 に時間がかかる場合は、f1 を書き換えて、f1 のコールバック関数として f2 を記述することを検討できます。
関数 f1(コールバック){
setTimeout(function () {
// f1 のタスクコード
コールバック();
}, 1000);
}
実行されたコードは次のようになります:
f1(f2);
この方法を使用すると、F1 はプログラムの実行をブロックしません。これは、プログラムのメイン ロジックを最初に実行し、時間のかかる操作の実行を延期することと同じです。
コールバック関数の利点は、シンプルで理解しやすく、デプロイしやすいことです。欠点は、コードの読み取りと保守が容易ではないことです。プロセスは高度に結合されています。非常にわかりにくく、各タスクで指定できるコールバック関数は 1 つだけです。
2. イベント監視
もう 1 つの考え方は、イベント駆動型モデルを使用することです。タスクの実行は、コードの順序ではなく、イベントが発生するかどうかによって決まります。
f1 と f2 を例に挙げてみましょう。まず、イベントを f1 にバインドします (ここでは jQuery を使用します)。
f1.on('完了', f2);
上記のコード行は、done イベントが f1 で発生すると、f2 が実行されることを意味します。次に、f1 を次のように書き換えます:
関数 f1(){
setTimeout(function () {
// f1 のタスクコード
f1.trigger('done');
}, 1000);
}
f1.trigger('done') は、実行完了後、done イベントが直ちにトリガーされて f2 の実行が開始されることを意味します。
このメソッドの利点は、比較的理解しやすいこと、複数のイベントをバインドできること、各イベントで複数のコールバック関数を指定できること、そしてモジュール化に役立つ「分離」できることです。欠点は、プログラム全体をイベント駆動型にする必要があり、実行プロセスが非常に不明確になることです。
3. 公開/購読
前のセクションの「イベント」は「信号」として理解できます。
特定のタスクが実行されると、シグナル センターにシグナルを「発行」し、他のタスクがシグナル センターからのシグナルを「サブスクライブ」できることを前提としています。自分で実行を開始します。これは「パブリッシュ・サブスクライブ・パターン」（パブリッシュ・サブスクライブ・パターン）と呼ばれ、「オブザーバー・パターン」（オブザーバー・パターン）とも呼ばれます。
このパターンには多くの実装があります。以下で使用するものは、jQuery のプラグインである Ben Alman の Tiny Pub/Sub です。
まず、f2 は「シグナル センター」jQuery からの「done」シグナルをサブスクライブします。
jQuery.subscribe("完了", f2);
次に、f1 は次のように書き換えられます:
関数 f1(){
setTimeout(function () {
// f1 のタスクコード
jQuery.publish("done");
}, 1000);
}
jQuery.publish("done") は、f1 の実行が完了した後、"done" シグナルが "シグナル センター" jQuery にリリースされ、それによって f2 の実行がトリガーされることを意味します。
また、f2 の実行完了後に購読を解除することもできます。
jQuery.unsubscribe("完了", f2);
この方法の性質は「イベント リスニング」に似ていますが、後者よりも大幅に優れています。なぜなら、「メッセージ センター」を見て、存在するシグナルの数と各シグナルの加入者数を確認することで、プログラムの動作を監視できるからです。
4. 約束オブジェクト
Promises オブジェクトは、非同期プログラミング用の統一インターフェイスを提供するために CommonJS ワーキング グループによって提案された仕様です。
簡単に言えば、各非同期タスクが Promise オブジェクトを返し、そのオブジェクトにはコールバック関数を指定できる then メソッドがあるという考え方です。たとえば、f1 のコールバック関数 f2 は次のように記述できます:
f1().then(f2);
f1 は次のように書き直す必要があります (ここでは jQuery 実装が使用されています):
関数 f1(){
var dfd = $.Deferred();
setTimeout(function () {
// f1 のタスクコード
dfd.resolve();
}, 500);
dfd.promise を返します;
}
この方法で記述する利点は、コールバック関数がチェーン記述メソッドになること、プログラム フローが明確に見えること、および多くの強力な関数を実現できるサポート メソッドの完全なセットがあることです。
たとえば、複数のコールバック関数を指定します:
f1().then(f2).then(f3);
別の例として、エラー発生時のコールバック関数を指定します:
f1().then(f2).fail(f3);
さらに、前の 3 つの方法にはない利点があります。タスクが完了し、コールバック関数が追加された場合、そのコールバック関数がすぐに実行されます。そのため、イベントや信号を見逃すことを心配する必要はありません。この方法の欠点は、書くのも理解するのも比較的難しいことです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
