针对多个Ajax调用的jQuery回调

Question

针对多个Ajax调用的jQuery回调我想在一个点击事件中进行三个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

下面是我编写的一个回调对象，您可以在其中设置一个回调，一旦全部完成，或者让每个回调都有自己的回调，并在所有回调完成后都启动它们：

通知

由于jQuery1.5+可以使用另一个答案中描述的延迟方法：

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

这里延迟的例子

对于jQuery<1.5，以下内容可以工作，或者如果您需要在未知的时间启动Ajax调用，如下面两个按钮所示：点击两个按钮后启动

[使用]

为单株回调完成后：工作实例

// initialize herevar 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 2

看起来您已经找到了一些解决这个问题的方法，但是我认为这里有一些值得提及的东西，它将极大地简化您的代码。jQuery引入了$.when在1.5节。看起来：

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

我没看到这里提到过，希望能有所帮助。

Answer 3

我自己也看不出需要什么东西。Simple有一个变量，它是一个整数。启动请求时，增加该数字。当一个人完成的时候，减少它。当它为零时，没有正在进行的请求，所以您完成了。

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