ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptのグローバルタグコントロールとPromiseクラスの使用例の詳細説明

JavaScriptのグローバルタグコントロールとPromiseクラスの使用例の詳細説明

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

グローバルマーク制御

(1) 単純なカウンタ制御

もしかしたら、上で紹介した非同期メソッドはまだ実際の開発のビジネスシナリオを満たすことができないかもしれません: a()、b()、c()、aの3つのメソッドがあると仮定します。および b には依存関係がなく、非同期で実行できます。ただし、c は、a と b の両方が完了した後にのみトリガーできます。このような論理的な実装を満たすために、コードの実行フローを制御するグローバル カウンターを追加します。

var flag=2;
var aValue,bValue;
function a(){
 aValue=1;
 flag--;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  flag--;
  c();
 },200);
}
function c(){
 if(flag==0){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();
ログイン後にコピー

メソッド a とメソッド b の完了を監視するグローバル変数フラグを設定します。メソッド b は、200 ミリ秒のタイマーを設定してネットワーク環境をシミュレートし、メソッド b の実行後に最終的にメソッド c を正常に呼び出します。このようにして、メソッド a()、b()、c() への依存呼び出しを実装します。

(2) データ指向制御

上記のソリューションを複雑なシナリオに適用すると、次の問題が発生します: 製品は複数のバージョンの反復を経ており、c メソッドはより多くのメソッドに依存しているため、カウンター フラグが必要になります。製品開発者は反復中に常に変更されます。上記の 2 つの状況が発生すると、コードのロジックが混乱し、フラグ タグが簡潔かつ正確なままであるかどうかは、製品の反復に大きく影響されます。したがって、データ指向の最適化の改善を提案します。

実際の開発シナリオでは、メソッドの依存関係が存在する理由は、基本的にはデータの依存関係が存在するためです。上記の簡単な例では、メソッド c は、メソッド a とメソッド b の操作の結果に依存します。フラグが0かどうか。したがって、マーカーが 0 に設定されているかどうかを確認することを、依存するメソッドがデータ処理を完了したかどうかを確認することで置き換えることができます。この例では、c メソッドで aValue と bValue が代入を完了したかどうかを確認することになります。一般的なシナリオでは、上記のコードを次のように変更します。

function c(){
 if(aValue!==undefined && bValue!==undefined){
  console.log("after a and b:"+(aValue+bValue));
 }
}
ログイン後にコピー

データ指向のチェック メソッドを使用することで、将来拡張するときに、新しいメソッドの checkDependency オブジェクトに変更を追加し、対応するオブジェクトをチェックするだけで済みます。 c メソッドの属性 の存在により、非同期の依存メソッドの逐次実行が実現されます。

Promise クラス

JavaScript の非同期メソッドの複雑さを解決するために、統合制御メソッドが正式に導入されました:

var checkDependency={};
var aValue,bValue;
function a(){
 aValue=1;
 checkDependency.a=true;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  checkDependency.b=true;
  c();
 },200);
}
function c(){
 if(checkDependency.a && checkDependency.b){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();
ログイン後にコピー

上記のコード例は、基本的な Promise アプリケーションを示しています。これは、実際のシナリオではより一般的である可能性があります。次のチェーンコールです:

var bool=false;
/*
 * 新建一个Promise实例,向构造函数传入一个异步执行函数
 * 异步函数会接受两个参数,由Promise传入,对应then方法中传入的方法
 */
var promise=new Promise(function(resolve,reject){
 setTimeout(function(){
  if(bool){
   //根据执行情况相应调用resolve和reject
   resolve(bool);
  }else{
   reject(bool);
  }
 },200);
});
//通过then向Promise实例传入解决方法
promise.then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});
ログイン後にコピー

以上がJavaScriptのグローバルタグコントロールとPromiseクラスの使用例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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