多个ajax调用的jQuery回调

Question

我想在点击事件中进行三次ajax调用.每个ajax调用都执行不同的操作,并返回最终回调所需的数据.呼叫本身并不依赖于彼此,它们都可以同时进行,但是当所有三个呼叫完成时,我希望最终回调.

$('#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*/});
});

Answer 1

看起来你已经得到了一些答案,但是我认为这里有一些值得一提的东西会大大简化你的代码.jQuery $.when在v1.5中介绍了它.看起来像:

$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});

没看到这里提到它,希望它有所帮助.

Answer 2

这是我写的一个回调对象,你可以设置一个单独的回调,一旦完成就会触发,或者让每个回调都有自己的回调,并在完成后全部触发它们:

注意

从jQuery 1.5+开始,您可以使用另一个答案中描述的延迟方法:

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

这里推迟的例子

对于jQuery <1.5,以下内容将起作用,或者如果您需要在未知时间触发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);
        };
    };
})();

Answer 3

没有看到任何对象malarky自己的需要.简单有一个整数变量.当您启动请求时,请递增该号码.当一个完成时,减少它.当它为零时,没有正在进行的请求,所以你已经完成了.

$('#button').click(function() {
    var inProgress = 0;

    function handleBefore() {
        inProgress++;
    };

    function handleComplete() {
        if (!--inProgress) {
            // do what's in here when all requests have completed.
        }
    };

    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
});

Answer 4

值得一提的是,由于$.when期望所有Ajax请求的顺序参数(不是数组),你会经常看到$.when用使用.apply()像这样:

// Save all requests in an array of jqXHR objects
var requests = arrayOfThings.map(function(thing) {
    return $.ajax({
        method: 'GET',
        url: 'thing/' + thing.id
    });
});
$.when.apply(this, requests).then(function(resp1, resp2/*, ... */) {
    // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
    var responseArgsArray = Array.prototype.slice.call(this, arguments);

});

这是因为$.when接受这样的args

$.when(ajaxRequest1, ajaxRequest2, ajaxRequest3);

而不是这样的:

$.when([ajaxRequest1, ajaxRequest2, ajaxRequest3]);