[解決済み] 複数のajax呼び出しに対するjQueryコールバック

質問

クリックイベントで3つのajaxを呼び出したいのです。各Ajaxコールは個別の操作を行い、最終的なコールバックに必要なデータを返します。呼び出し自体は互いに依存しないので、すべて同時に行うことができますが、私は3つすべてが完了したときに最終的なコールバックを持つことを望みます。

$('#button').click(function() {
    fun1();
    fun2();
    fun3();
//now do something else when the requests have done their 'success' callbacks.
});

var fun1= (function() {
    $.ajax({/*code*/});
});
var fun2 = (function() {
    $.ajax({/*code*/});
});
var fun3 = (function() {
    $.ajax({/*code*/});
});

どのように解決するのですか？

ここに私が書いたコールバックオブジェクトがあります。このオブジェクトでは、1つのコールバックを設定して、すべてが完了したらそれを起動するか、または各コールバックを設定して、すべてが完了したらそれらをすべて起動することができます。

注意

jQuery 1.5+以降では、別の回答で説明されているように、遅延メソッドを使用することができます。

  $.when($.ajax(), [...]).then(function(results){},[...]);

遅延の例はこちら

jQuery < 1.5では、次のように動作します。また、2つのボタンでここに示すように、未知の時間にajaxコールを発生させる必要がある場合。 両方のボタンがクリックされた後に実行される

[使い方］

の場合 シングル コールバックが完了したら 動作例

// initialize here
var requestCallback = new MyRequestsCompleted({
    numRequest: 3,
    singleCallback: function(){
        alert( "I'm the callback");
    }
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});

それぞれ があります。 コールバックを持ちます。 動作例

//initialize 
var requestCallback = new MyRequestsCompleted({
    numRequest: 3
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the first callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the second callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the third callback');
        });
    }
});

[コード］

var MyRequestsCompleted = (function() {
    var numRequestToComplete, requestsCompleted, callBacks, singleCallBack;

    return function(options) {
        if (!options) options = {};

        numRequestToComplete = options.numRequest || 0;
        requestsCompleted = options.requestsCompleted || 0;
        callBacks = [];
        var fireCallbacks = function() {
            alert("we're all complete");
            for (var i = 0; i < callBacks.length; i++) callBacks[i]();
        };
        if (options.singleCallback) callBacks.push(options.singleCallback);

        this.addCallbackToQueue = function(isComplete, callback) {
            if (isComplete) requestsCompleted++;
            if (callback) callBacks.push(callback);
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.requestComplete = function(isComplete) {
            if (isComplete) requestsCompleted++;
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.setCallback = function(callback) {
            callBacks.push(callBack);
        };
    };
})();