より良いプログラムを書くのに役立つ JavaScript 非同期プログラミングの 4 つの方法_JavaScript スキル

ご存じのとおり、JavaScript言語の実行環境は「シングルスレッド」です。
いわゆる「シングルスレッド」とは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了したら、次のタスクが実行されます。

このモードの利点は、実装が比較的簡単で、実行環境が比較的シンプルであることです。欠点は、1 つのタスクに時間がかかる限り、後続のタスクをキューに入れる必要があることです。 、プログラム全体の実装が遅れます。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。

この問題を解決するために、JavaScript 言語ではタスクの実行モードを 同期 (Synchronous) と非同期 (Asynchronous) の 2 種類に分けます。

「同期モード」は、前の段落のモードです。後者のタスクは、前のタスクの終了を待ってから実行されます。プログラムの実行順序は、「非同期」です。 「モード」は全く異なります。各タスクには 1 つ以上のコールバック関数があります。前のタスクが終了すると、次のタスクの代わりにコールバック関数が実行されます。前のタスクが終了する前に後のタスクが実行されるため、プログラムの実行順序は異なります。タスクの順序と矛盾しており、非同期です。

「非同期モード」は非常に重要です。ブラウザー側では、ブラウザーが応答しなくなることを避けるために、長時間実行される操作を非同期で実行する必要があります。その最良の例は Ajax 操作です。サーバー側では、実行環境がシングルスレッドであるため、「非同期モード」が唯一のモードであり、すべての http リクエストの同期実行が許可されている場合、サーバーのパフォーマンスが大幅に低下し、すぐに応答しなくなります。

この記事では、「非同期モード」プログラミングの 4 つの方法をまとめています。これらを理解すると、より合理的な構造で、パフォーマンスが向上し、メンテナンスが容易な Javascript プログラムを作成できるようになります。

1. コールバック関数
これは、非同期プログラミングの最も基本的な方法です。
f1 と f2 という 2 つの関数があり、後者は前者の実行結果を待つとします。

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

f1(); );

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

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

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

実行コードは以下のようになります。 🎜 >

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

f1(f2); >

このようにして、F1 はプログラムの実行をブロックしません。これは、プログラムのメイン ロジックを最初に実行し、時間のかかる操作の実行を延期することと同じです。

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

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");


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

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

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

jQuery.unsubscribe("done", f2 );

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

4. Promises オブジェクト
Promises オブジェクトは、非同期プログラミング用の統一インターフェイスを提供するために CommonJS ワーキング グループによって提案された仕様です。 簡単に言えば、各非同期タスクが Promise オブジェクトを返し、そのオブジェクトにはコールバック関数を指定できる then メソッドがあるという考え方です。たとえば、f1 のコールバック関数 f2 は次のように記述できます:

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

f1 ().then(f2);

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

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

function f1(){

var dfd = $.Deferred(); > setTimeout(function () {
/ / f1 のタスクコード
dfd.resolve();
},
return dfd.promise; という関数になりました。プログラムの流れがわかりやすく、多くの強力な機能を実現するためのサポートメソッドが完備されています。

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

コードをコピーします


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

f1().then(f2).then(f3); 別の例では、エラーが発生した場合のコールバック関数を指定します:

コードをコピーします

コードは次のとおりです:

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