[解決済み] jQuery の Ajax リクエストがすべて終了するまで待ちますか？

質問

jQuery Ajaxリクエストがすべて別の関数内で完了するまで、ある関数を待機させるにはどうすればよいですか？

要するに、すべてのAjaxリクエストが完了するのを待ってから、次の実行をする必要があるのです。でも、どうやって？

解決方法は？

jQueryは現在 機能 を使用します。

これは引数として任意の数のDeferredオブジェクトを受け取り、それらが全て解決された時に関数を実行します。

つまり、（例えば）4つのajaxリクエストを開始し、それらが終了したらアクションを実行したい場合、以下のようにすることが可能です。

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

私見ですが、この方法だと構文がすっきりしており、ajaxStartやajaxStopのようなグローバル変数が含まれないので、ページの開発中に好ましくない副作用が発生する可能性があります。

もし、いくつのajax引数を待つ必要があるか事前に分からない場合（つまり、可変数の引数を使用したい場合）、それでも可能ですが、ほんの少しトリッキーになります。参照 Deferredsの配列を$.when()に渡す。 (そして多分 jQuery .whenの引数数可変のトラブルシューティング ).

ajax スクリプトの失敗モードなどをより深く制御する必要がある場合は、以下の方法で返されたオブジェクトを保存します。 .when() - これはjQueryの 約束 オブジェクトは、オリジナルのすべてのajaxクエリを包含しています。を呼び出すことができます。 .then() または .fail() を追加し、詳細な成功/失敗のハンドラを追加します。