web-dev-qa-db-ja.com

jQueryを待っていますAJAX response（s）

100回呼び出されるjQuery.ajax（async：true）を使用して、それらがすべてロードされているときに、システムが100回すべての呼び出しが戻るのを待ってから続行する必要があるというページがあります。どうすればいいですか？

前もって感謝します！ :)

更新：

これらの呼び出しはfor（）ループで行われます（100個あります:)）

ajaxjqueryjquery-deferred
18
Eax

これを行う良い方法は $.when 。これは次のように使用できます。

$.when(
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
    $.ajax({/*settings*/}),
).then(function() {
    // when all AJAX requests are complete
});

または、すべてのAJAX呼び出しが配列内にある場合は、 apply ：を使用できます。

$.when.apply($, ajaxReqs);

これには少なくともjQuery1.5が必要であることに注意してください。

AJAXリクエストを配列に追加するには、次のようにします。

var ajaxReqs = [];
for (var i = 0; i < 100; i++) {
    ajaxReqs.Push($.ajax({
        /* AJAX settings */
    });
}
$.when.apply($, ajaxReqs).then(function() {
    // all requests are complete
});
36
lonesomeday

この種の問題は、データベースSQL設計のいたるところに発生します。正確には同じではありませんが、問題はまさにネットワーク通信です。

正しく行わないと、噛み付くように戻ってくるので、注意する必要があります。つまり、ユーザーは待たなければならないことにひどくイライラします。私はこれを十分に強調することはできません。

シナリオは次のとおりです。要求に応じて、サーバーから多くの小さな情報スニペットを転送したいとします。各リクエストは、効率的に機能するいくつかの要因によって異なります。これらはすべてあなたのコントロールの外にあります：

Wide area Network reposnse time (anywhere in the world right?)
Locak area Network reposnse time (anywhere in the building)
WebServer Load
WebServer Response time
Database response time
Backend Script run time
Javascript run time to process the result
The fact that the browsers are generally limited to 6-8 parallel AJAX requests at once (I think - someone correct me on the exact number)

それをリクエストで乗算します（erm ...あなたの場合はx100）

その絵を入手する？

ローカルマシンでのテストでは、問題なく機能する可能性があります。まったく同じマシンで独自のデータベースとWebサーバーを実行している場合もありますが、実際に試してみると、やがて信頼性が低下することが問題になります。

聞いてください、簡単なことは、すべてのパラメーターを1つのJS配列にラップし、それを1つのPOSTリクエストで送信することです。次に、サーバー上ですべてのデータベースが選択し、応答を1つにロールアップします。 JSON/XML応答。

その時点で、1つのAJAX応答を待つだけです。すべてのデータはJSON/XMLの結果で見つけることができます。

100のリクエストを処理しているとすると、ストップウォッチを使用して実際に時間の節約を測定できる可能性があります。

私からそれを取ってください-できるだけ少ないネットワーク要求をしてください。

4
T9b

Deferred object api を使用できます。 $ .ajaxが遅延オブジェクトを返す限り、次のコードを試してループを使用できます。

var ajaxes = [];
for (i = 1; i < 100; i++) {
  ajaxes[i] = $.ajax({/*data*/});
}

$.when.apply( ajaxes )
   .then(function(){
      console.log( 'I fire once all ajax requests have completed!' );
   })
   .fail(function(){
      console.log( 'I fire if one or more requests failed.' );
   });

P.S. Eric Hyndsによる遅延オブジェクトの使用に関するすばらしい記事があります jQuery 1.5での遅延オブジェクトの使用

3
Pavel Morshenyuk

100 Ajax呼び出し？非常に奇妙な要件のようであり、達成しようとしていることは、別の方法を使用して達成できる可能性があります。

 var i = 0; 
 
 function myCallback（）{
 alert（ '100回完了'）; 
} 
 
 function doAjax（）{
 $ .ajax（{
 url： 'blah.php'、
 data： 'hello = world'、
成功：function（response）{
 i ++; 
}、
 complete：function（）{
 if（i <100）{
 doAjax（）; 
} else {
 myCallback（）; 
} 
} 
}）; 
} 
 
 doAjax（）; //開始
2
amustill

私はJSの人ではありませんが、グローバル変数を作成します。これがカウンターになり、このグローバル変数が100に達したかどうかを定期的にチェックする、時限関数を定義します。

編集：setTimeout（）

0
Damien