ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript非同期プログラミングにおけるコールバック関数とマネージャーの使用例を詳しく解説

JavaScript非同期プログラミングにおけるコールバック関数とマネージャーの使用例を詳しく解説

伊谢尔伦
リリース: 2017-07-21 14:31:19
オリジナル
1527 人が閲覧しました

ブラウザのイベント ポーリング メカニズム (および Node.js のイベント ポーリング メカニズム) に基づいて、JavaScript は非同期環境で実行されることがよくあります。 JavaScript 独自の言語の特性 (プログラマがスレッド/プロセスを制御する必要がない) により、js で非同期プログラミングを解決することが非常に重要です。完全なプロジェクトでは、JS 開発者が非同期操作に直面しないことは不可能であると言えます。

1. コールバック関数

(1) 古典的なコールバック関数メソッド: ネストされたインライン関数

URL パラメーターを受け取り、アドレスへの非同期リクエストを開始する ajax() メソッドがあるとします。 2 番目のパラメータ - リクエストの最後にあるコールバック関数:


ajax(url,function(result){
 console.log(result);
});
ログイン後にコピー

このメソッドは、ほぼすべてのフロントエンド開発者によって使用されるコールバック関数メソッドであると言えます。サーバー リクエストがいつ返されるかを推測するために次のようなコードを記述する必要はありません:


var result=ajax(url);
setTimeout(function(result){
 console.log(result);
},400);
ログイン後にコピー

ここで私が何を表現したいのか理解できるはずです。行う ajax リクエストが 400 ミリ秒以内に完了すると仮定して、400 ミリ秒の遅延を持つタイマーを設定します。それ以外の場合は、未定義の結果を処理します。

しかし、プロジェクトが拡大するにつれて徐々に現れる問題があります。シナリオで複数の層のネストされたコールバック関数が必要な場合、コードの読み取りと保守が困難になります:


ajax(url0,function(result0){
 ajax(result0.url1,function(result1){
  ajax(result1.url2,function(result2){
   console.log(result2);
  });
 });
});
ログイン後にコピー

(2)外部関数の呼び出し

インライン コールバック関数によって明らかにされるコードの混乱の問題を解決するために、同様の問題を解決するために外部関数呼び出しを導入します:


function handle2(result){
 console.log(result);
}
function handle1(result){
 ajax(result.url,function(result){
  handle2(result);
 });
}
ajax(url,function(result){
 handle1(result);
});
ログイン後にコピー

このようにインライン関数を分割することで、外部呼び出しの最適化方法が実現されます。関数はコードを単純にすることで非常に効果的になります。

2. コールバック マネージャーを開発する

Nimble、Step、Seq などの一般的な JavaScript プロセス制御ツールを観察して、次のようにコールバック マネージャーを通じて非同期 JavaScript 実行プロセスを制御する簡単な設計パターンを学びます。これは、典型的なコールバック マネージャーの主要なコード例です:


var Flow={};
//设置next方法,在上一个方法完成时调用下一个方法
Flow.next=function(){
 if(this.stack[0]){
  //弹出方法栈中的第一个方法,并执行他
  this.stack.shift()();
 }
};
//设置series方法,接收一个函数数组,并按序执行
Flow.series=function(arr){
 this.stack=arr;
 this.next();
};

//通过Flow.series我们能够控制传入的函数的执行顺序
Flow.series([
  function(){
   //do something
   console.log(1);
   Flow.next();
  },
  function(next){
   //do something
   console.log(2);
   Flow.next();
  }
]);
ログイン後にコピー

フロー コントローラーを初期化し、2 つの関数属性シリーズと次の関数を設計しました。作成したビジネス メソッド内では、メソッドの最後で Flow.next() を呼び出すことによって next メソッドが順番にトリガーされ、非同期関数は series メソッドを実行することによって順番に実行されます。コア コントローラーを介して非同期関数呼び出しを管理するこの方法により、プログラミング プロセスが簡素化され、開発者はビジネス ロジックにより多くのエネルギーを注ぐことができます。

以上がJavaScript非同期プログラミングにおけるコールバック関数とマネージャーの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート