JavaScript_javascript スキルで複数の同時実行の問題に対処する方法

コードを書くときによくこのシナリオに遭遇します。ページが初期化されるときに読み込みページが表示され、データを取得するために複数の ajax 同時リクエストが開始され、各 ajax リクエストが返されると読み込みが終了します。

たとえば、注文を行うページでは、一般的な住所情報、製品情報、都市情報などをクエリする必要があります。これらのリクエストは、すべてのデータがロードされるまでユーザーが操作できないようにすることが望まれます。 。

このシナリオを実装するときに遭遇しやすい問題は、複数の同時実行をどのように制御するかということです。以下にいくつかの解決策とアイデアを示します:

パラレルからシリアルに変更されました

ビジネス ロジック自体はシリアルであるが、提供されるリクエスト メソッドが非同期である場合は、このメソッドを検討できます。
しかし、これは明らかにこのシナリオには当てはまりません。これを行うと、ページのパフォーマンスが大幅に低下し、読み込み速度が長くなります。

コールバック

同時実行の数が少ない状況にのみ適しています。複数レベルのネストされたコールバックは、コードの可読性を大幅に低下させます。

function async1(){
  //do sth...
}
function async2(){
  //do sth...
  async1();
}
async2();

ajax が同期に変更されました

jquery で async パラメータを false に設定します

$.ajax({
  url:"/jquery/test1.txt",
  async:false
});

終了フラグを設定します

より簡単な方法は、非同期関数が完了するたびに 1 ずつ増加するカウンターを設定するか、配列を設定して非同期関数が実行されるたびに配列を更新することです。

コールバック数

var cnt = 0;
function async1(){
  //do sth...
  callback();
}
function async2(){
  //do sth...
  callback();
}
function callback(){
  cnt++;
  if(2==cnt) console.log('都已执行完毕');
}

ループがブロックされました

var cnt = 0;
function async1(){
  //do sth...
  cnt++;
}
function async2(){
  //do sth...
  cnt++;
}
while(2>cnt){}

ループ非ブロッキング

パフォーマンスへの影響を避けるため、過度に使用することはお勧めしません

var cnt = 0;
function async1(){
  //do sth...
  cnt++;
}
function async2(){
  //do sth...
  cnt++;
}
var interval = setInterval(function(){
  if(2===cnt){
    console.log('已执行完成');
    clearInterval(interval)
  }
}

サードパーティフレームワークの実装

jquery

私のプロジェクトで使用している現在のアプローチ

var d1 = $.Deferred();
var d2 = $.Deferred();
function async1(){
  d1.resolve( "Fish" );
}
function async2(){
  d2.resolve( "Pizza" );
}
$.when( d1, d2 ).done(function ( v1, v2 ) {
  console.log( v1 + v2 + '已完成');
});

上記の内容は、JavaScript における複数の同時実行の問題に対処する方法について編集者が紹介した関連知識です。お役に立てば幸いです。