ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの非同期プログラミング手法にはどのようなものがありますか?

JavaScriptの非同期プログラミング手法にはどのようなものがありますか?

清浅
清浅オリジナル
2019-04-19 13:07:412975ブラウズ

JavaScript で非同期プログラミングを実装する方法には、理解しやすく実装は簡単だがコードの保守が難しいコールバック メソッド、パブリッシュ/サブスクライブ メソッド、理解しやすく複数のイベントをバインドできるがワークフローが複雑なイベント リスニング メソッド、および Promises メソッド

非同期モードは非常に重要です。ブラウザ側で長時間実行される操作は、無応答を避けるために非同期で実行する必要があります。次に、JavaScript での非同期プログラミング手法の実装について記事で詳しく紹介しますが、一定の参考効果があり、皆さんの参考になれば幸いです。

JavaScriptの非同期プログラミング手法にはどのようなものがありますか?

#【おすすめコース: JavaScript チュートリアル #】

JavaScript の実行環境がシングルスレッドであることは誰もが知っていますが、シングルスレッドとは、一度に 1 つのタスクしか実行できないことを意味します。複数のタスクが発生した場合は、前のタスクが完了するまでキューで待つ必要があります。同期モードはこのシングルスレッドモードと似ていますが、非同期モードは全く異なります 各タスクにはコールバック関数があり、タスクが完了するとコールバック関数が実行され、その後のタスクが実行されますタスクは前のタスクを同時に実行できます。タスクの実行順序は、キュー内のタスクの順序とは異なります。

メソッド 1: コールバック メソッド

このメソッドは、非同期プログラミングの基本的なメソッドです。2 つの関数 f1 と f2 があるとします。後者は最初の関数を待ちます。結果。

F1(); 
F2();

f1 が長時間実行される操作の場合は、f1 をオーバーライドし、f2 を f1 のコールバック関数として使用できます。

function f1(callback){
setTimeout(function () {
 callback();
    }, 1000);
}

このモードを使用すると、同期操作を非同期操作に変換できます。f1 はプログラムの実行を妨げません。最初にメイン ロジックが実行され、次に時間のかかる操作が実行されます。

コールバックfunction 利点は、理解しやすく実装しやすいことですが、欠点は、コードが読みにくく保守しにくいこと、さまざまなコンポーネントが高度に結合されていること、ワークフローが非常に混乱していること、各タスクがコールバック関数を 1 つしか持てないことです。

方法 2: パブリッシュ/サブスクライブ

このイベントはシグナルとして理解できます。シグナル センターがあると仮定すると、タスクが完了すると、信号を信号センターに送信し、他のタスクは加入している信号センターから指定された信号を受信できます。このアプローチは、パブリッシュ/サブスクライブ パターンまたはオブザーバー パターンと呼ばれます。

例: f2 はシグナル センターにサブスクライブしてシグナルを完了します。

jQuery.subscribe(“done”,f2);

次に、f1 を

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

jQuery.publish("done") と書き込みます。 f1 が実行を完了すると信号センターに完了信号を送信し、その後 f2 が実行を開始することを意味します。

f2 の実行が完了すると、サブスクライブを解除できます。

jQuery.unsubscribe(“done”,f2);

方法 3: イベント リスニング

もう 1 つの方法はイベント駆動型モデルです。タスクの実行はコード シーケンスに依存しません。タスクの実行はコード シーケンスに依存しません。起こる出来事。この例では引き続き f1 と f2 を使用し、まずイベントを f1 にバインドします。

f1.on('done',f2);

上記のコードの意味は、f1 完了イベントが発生すると f2 が実行されるということです。

function f1(){
    setTimeout(function () {
      f1.trigger('done');
    }, 1000);
}

f1.trigger('done') は、done イベントをトリガーし、実行完了時に f2 を実行することを意味します。

利点は、理解しやすく、複数のイベントをバインドできること、各イベントに多くのコールバック関数を含めることができ、分離できるためモジュール化に有利であることです。欠点は、プログラム全体がイベント駆動型となり、ワークフローがあまり明確ではないことです。

メソッド 4: Promises メソッド

Promises オブジェクトは、非同期プログラミングに共通のインターフェイスを提供するために CommonJS によって提案された標準です。各非同期タスクは Promises オブジェクトを返します。このオブジェクトには、コールバック関数を設定できる then メソッドがあります。たとえば、f1 のコールバック関数 f2:

F1().then(F2)

f1 は次のように記述します:

function f1(){
    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 500);
    return dfd.promise;
}

利点は、コールバック関数がリンクされていること、つまり、プログラムは非常に明確で、強力な機能を実装するために使用できる一連の完全なリンク メソッドが含まれています。

たとえば、複数のコールバック関数を設定する場合:

f1().then(f2).then(f3);

エラーが発生した場合の別の例:

f1().then(f2).fail(f3);

他の 3 つのメソッドにはない利点の 1 つは、次のとおりです。タスクが完了したら、さらにコールバック関数を追加すると、すぐに実行されます。デメリットは分かりにくいことです。

要約: 以上がこの記事の全内容です。皆様のお役に立てれば幸いです。

以上がJavaScriptの非同期プログラミング手法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。