JavaScriptで非同期プログラミングを行う4つの方法_基礎知識

JavaScript言語の実行環境は「シングルスレッド」であることはご存知かと思います。
いわゆる「シングルスレッド」とは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了したら、次のタスクが実行されます。
このモードの利点は、実装が比較的簡単で、実行環境が比較的シンプルであることです。欠点は、1 つのタスクに時間がかかると、後続のタスクをキューに入れる必要があり、実行が遅れることです。プログラム全体の。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。
この問題を解決するために、JavaScript 言語ではタスクの実行モードを同期 (Synchronous) と非同期 (Asynchronous) の 2 種類に分けています。
「同期モード」は、前の段落で説明したモードであり、後者のタスクは、前のタスクの終了を待ってから実行されます。「非同期モード」は、プログラムの実行順序が一致しており、タスクの順序と同期しています。各タスクには 1 つ以上のコールバック関数 (callback) があり、前のタスクが終了すると次のタスクは実行されませんが、前のタスクの終了を待たずに後のタスクが実行されます。プログラムの実行順序に一貫性がなく、タスクの順序と非同期です。
「非同期モード」は非常に重要です。ブラウザー側では、ブラウザーが応答しなくなることを避けるために、長時間実行される操作を非同期で実行する必要があります。その最良の例は Ajax 操作です。サーバー側では、実行環境がシングルスレッドであるため、「非同期モード」が唯一のモードであり、すべての http リクエストの同期実行が許可されている場合、サーバーのパフォーマンスが大幅に低下し、すぐに応答しなくなります。
1. コールバック関数

これは、非同期プログラミングの最も基本的な方法です。

f1 と f2 という 2 つの関数があり、後者は前者の実行結果を待つとします。

コードをコピー コードは次のとおりです。

f1();
f2( );

f1 に時間がかかる場合は、f1 を書き換えて、f1 のコールバック関数として f2 を記述することを検討できます。

コードをコピー コードは次のとおりです。

function f1(callback){
setTimeout(function () {
// f1 のタスクコード
callback();
}, 1000);
}

実行コードは次のようになります:

f1(f2); この方法では、同期操作を非同期操作に変更します。f1 はプログラムの実行をブロックしません。これは、プログラムのメイン ロジックを最初に実行し、時間のかかるロジックの実行を延期するのと同じです。操作。

コールバック関数の利点は、シンプルで理解しやすく、デプロイしやすいことです。欠点は、コードの読み取りと保守が容易ではないことです。プロセスは高度に結合されています。非常にわかりにくく、各タスクで指定できるコールバック関数は 1 つだけです。

2. イベント監視

もう 1 つの考え方は、イベント駆動型モデルを使用することです。タスクの実行は、コードの順序ではなく、イベントが発生するかどうかによって決まります。

f1 と f2 を例に挙げてみましょう。まず、イベントを f1 にバインドします (ここでは jQuery を使用します)。

コードをコピー コードは次のとおりです。

f1.on('done', f2 );

上記のコード行は、done イベントが f1 で発生すると、f2 が実行されることを意味します。次に、f1 を次のように書き換えます:

コードをコピー コードは次のとおりです。

function f1(){
setTimeout (function ( ) {
// f1 のタスクコード
f1.trigger('done');
}, 1000);
}

f1.trigger('done') は、実行完了後、done イベントが直ちにトリガーされて f2 の実行が開始されることを意味します。

このメソッドの利点は、比較的理解しやすいこと、複数のイベントをバインドできること、各イベントで複数のコールバック関数を指定できること、そしてモジュール化に役立つ「分離」できることです。欠点は、プログラム全体をイベント駆動型にする必要があり、実行プロセスが非常に不明確になることです。

3. 公開/購読

前のセクションの「イベント」は「信号」として理解できます。

特定のタスクが実行されると、他のタスクはシグナル センターからのシグナルを「サブスクライブ」して、それが何であるかを知ることができます。 . 自分で実行を開始できます。これは「パブリッシュ・サブスクライブ・パターン」（パブリッシュ・サブスクライブ・パターン）と呼ばれ、「オブザーバー・パターン」（オブザーバー・パターン）とも呼ばれます。

このパターンには多くの実装があります。以下で使用するものは、jQuery のプラグインである Ben Alman の Tiny Pub/Sub です。

まず、f2 は「Signal Center」jQuery からの「done」シグナルをサブスクライブします。

コードをコピー コードは次のとおりです。

jQuery.subscribe("done", f2 );

すると、f1 は次のように書き換えられます:

コードをコピー コードは次のとおりです。

function f1(){
setTimeout (function ( ) {
// f1
jQuery.publish("done");
}, 1000);
}

jQuery.publish("done") は、f1 の実行が完了した後、「done」シグナルが「シグナル センター」jQuery にリリースされ、それによって f2 の実行がトリガーされることを意味します。

また、f2 の実行完了後に購読を解除することもできます。

コードをコピー コードは次のとおりです。

jQuery.unsubscribe("done", f2 );

この方法の性質は「イベントリスニング」に似ていますが、後者よりもはるかに優れています。なぜなら、「メッセージ センター」を見て、存在するシグナルの数と各シグナルの加入者数を確認することで、プログラムの動作を監視できるからです。

4. 約束オブジェクト

Promises オブジェクトは、非同期プログラミング用の統一インターフェイスを提供するために CommonJS ワーキング グループによって提案された仕様です。

簡単に言えば、各非同期タスクが Promise オブジェクトを返し、そのオブジェクトにはコールバック関数を指定できる then メソッドがあるという考え方です。たとえば、f1 のコールバック関数 f2 は次のように記述できます:

コードをコピーします コードは次のとおりです:

f1 ().then(f2);

f1 は次のように書き換える必要があります (ここでは jQuery 実装が使用されています):

コードをコピー コードは次のとおりです。

function f1(){
var dfd = $ .Deferred();
setTimeout(function () {
// f1 のタスク コード
dfd.resolve();
}, 500);
return dfd.promise;
}

この方法で書く利点は、コールバック関数がチェーン記述メソッドになること、プログラムの流れが明確に見えること、および完全なセットがあることです。多くの強力な機能を実現できるメソッドをサポートします。

たとえば、複数のコールバック関数を指定します:

f1().then(f2).then(f3);
別の例として、エラー発生時のコールバック関数を指定します。

f1().then(f2).fail(f3);
さらに、前の 3 つのメソッドにはない利点があります。タスクが完了し、コールバック関数が追加された場合、コールバック関数は関数はすぐに実行されます。そのため、イベントや信号を見逃すことを心配する必要はありません。この方法の欠点は、書くのも理解するのも比較的難しいことです。