すべての jQuery Ajax リクエストが完了するまで待機しますか? 質問する

すべての jQuery Ajax リクエストが完了するまで待機しますか? 質問する

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

つまり、次のリクエストを実行する前に、すべての Ajax リクエストが完了するまで待機する必要があります。しかし、どうすればよいでしょうか?

ベストアンサー1

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 引数の数がわからない場合 (つまり、可変数の引数を使用したい場合) でも、実行は可能ですが、少し複雑になります。Deferred の配列を $.when() に渡す(そして多分可変数の引数を使用したjQuery .whenのトラブルシューティング)。

Ajaxスクリプトなどの障害モードをより詳細に制御する必要がある場合は、返されるオブジェクトを保存できます.when()。これはjQueryです。約束元の Ajax クエリをすべて含むオブジェクト。.then()またはを呼び出し.fail()て、詳細な成功/失敗ハンドラを追加できます。

おすすめ記事