retorno de chamada jQuery para várias chamadas ajax

Quero fazer três chamadas ajax em um evento de clique. Cada chamada ajax faz uma operação distinta e retorna os dados necessários para um retorno de chamada final. As chamadas em si não são dependentes uma da outra, todas elas podem ir ao mesmo tempo; no entanto, eu gostaria de ter um retorno de chamada final quando todas as três estiverem concluídas.

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

Aqui está um objeto de retorno de chamada que escrevi, no qual você pode definir um único retorno de chamada para disparar uma vez concluído, ou permitir que cada um tenha seu próprio retorno de chamada e acioná-los todos quando terminar:

AVISO PRÉVIO

Desde o jQuery 1.5+, você pode usar o método adiado, conforme descrito em outra resposta:

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

Exemplo de diferido aqui

para jQuery <1.5, o seguinte funcionará ou se você precisar que suas chamadas ajax sejam acionadas em horários desconhecidos, como mostrado aqui com dois botões: acionado após o clique de ambos os botões

[uso]

para retorno de chamada único depois de concluído: Exemplo de Trabalho

// 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);
    }
});

cada um com seu próprio retorno de chamada quando tudo estiver concluído: Exemplo de Trabalho

//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');
        });
    }
});

[O código]

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

Parece que você tem algumas respostas para isso, no entanto, acho que há algo que vale a pena mencionar aqui que simplificará bastante o seu código. O jQuery introduziu o $.whenna v1.5. Parece que:

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

Não o vi mencionado aqui, espero que ajude.

Não vendo a necessidade de nenhum objeto mal-intencionado. Simples tem uma variável que é um número inteiro. Quando você inicia uma solicitação, aumente o número. Quando alguém terminar, diminua-o. Quando é zero, não há solicitações em andamento, então você está pronto.

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

É importante notar que desde que $.whenespera que todos os pedidos de ajax como argumentos seqüenciais (não um array) você vai comumente ver $.whenusado com .apply()assim:

// 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);

});

Isso ocorre porque $.whenaceita argumentos como este

$.when(ajaxRequest1, ajaxRequest2, ajaxRequest3);

E não é assim:

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

Eu gosto da ideia dos hvgotcodes. Minha sugestão é adicionar um incrementador genérico que compare o número completo com o número necessário e execute o retorno de chamada final. Isso pode ser incorporado no retorno de chamada final.

var sync = {
 callbacksToComplete = 3,
 callbacksCompleted = 0,
 addCallbackInstance = function(){
  this.callbacksCompleted++;
  if(callbacksCompleted == callbacksToComplete) {
   doFinalCallBack();
  }
 }
};

[Editado para refletir as atualizações de nome.]

EDIT - talvez a melhor opção seja criar um terminal em serviço que faça tudo o que as três solicitações fazem. Dessa forma, você só precisa fazer uma solicitação e todos os dados estão onde você precisa que eles estejam na resposta. Se você achar que está fazendo os mesmos três pedidos repetidamente, provavelmente desejará seguir esse caminho. Geralmente, é uma boa decisão de design configurar um serviço de fachada no servidor que agrupa geralmente ações menores do servidor. Apenas uma ideia.

Uma maneira de fazer isso seria criar um objeto 'sync' no seu manipulador de cliques antes que o ajax chame. Algo como

var sync = {
   count: 0
}

A sincronização será vinculada ao escopo das chamadas de sucesso automaticamente (fechamento). No manipulador de sucesso, você incrementa a contagem e, se for 3, pode chamar a outra função.

Como alternativa, você poderia fazer algo como

var sync = {
   success1Complete: false,
   ...
   success3Complete: false,
}

quando cada sucesso é executado, ele altera o valor na sincronização para true. Você precisaria verificar a sincronização para garantir que todos os três sejam verdadeiros antes de continuar.

Observe o caso em que um dos seus xhrs não retorna com êxito - você precisa dar conta disso.

Outra opção seria sempre chamar a função final em seus manipuladores de sucesso e acessar a opção de sincronização para determinar se realmente deve fazer alguma coisa. Você precisaria garantir que a sincronização esteja no escopo dessa função.

Fiz a mesma pergunta há um tempo e recebi algumas boas respostas aqui: Melhor maneira de adicionar um 'retorno de chamada' após uma série de chamadas XHR assíncronas

Recebi boas dicas das respostas desta página. Eu o adaptei um pouco para o meu uso e pensei em compartilhar.

// lets say we have 2 ajax functions that needs to be "synchronized". 
// In other words, we want to know when both are completed.
function foo1(callback) {
    $.ajax({
        url: '/echo/html/',
        success: function(data) {
            alert('foo1');
            callback();               
        }
    });
}

function foo2(callback) {
    $.ajax({
        url: '/echo/html/',
        success: function(data) {
            alert('foo2');
            callback();
        }
    });
}

// here is my simplified solution
ajaxSynchronizer = function() {
    var funcs = [];
    var funcsCompleted = 0;
    var callback;

    this.add = function(f) {
        funcs.push(f);
    }

    this.synchronizer = function() {
        funcsCompleted++;
        if (funcsCompleted == funcs.length) {
            callback.call(this);
        }
    }

    this.callWhenFinished = function(cb) {
        callback = cb;
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(this, this.synchronizer);
        }
    }
}

// this is the function that is called when both ajax calls are completed.
afterFunction = function() {
    alert('All done!');
}

// this is how you set it up
var synchronizer = new ajaxSynchronizer();
synchronizer.add(foo1);
synchronizer.add(foo2);
synchronizer.callWhenFinished(afterFunction);

Existem algumas limitações aqui, mas para o meu caso, tudo bem. Também descobri que, para coisas mais avançadas, também existe um plug-in AOP (para jQuery) que pode ser útil: http://code.google.com/p/jquery-aop/

Hoje me deparei com esse problema e essa foi minha tentativa ingênua antes de assistir à resposta aceita.

<script>
    function main() {
        var a, b, c
        var one = function() {
            if ( a != undefined  && b != undefined && c != undefined ) {
                alert("Ok")
            } else {
                alert( "¬¬ ")
            }
        }

        fakeAjaxCall( function() {
            a = "two"
            one()
        } )
        fakeAjaxCall( function() {
            b = "three"
            one()
        } )
        fakeAjaxCall( function() {
            c = "four"
            one()
        } )
    }
    function fakeAjaxCall( a ) {
        a()
    }
    main()
</script>

Não é jquery (e parece que o jquery tem uma solução viável), mas apenas como outra opção ....

Eu tive problemas semelhantes ao trabalhar muito com os serviços Web do SharePoint - muitas vezes você precisa extrair dados de várias fontes para gerar entrada para um único processo.

Para resolvê-lo, integrei esse tipo de funcionalidade na minha biblioteca de abstração AJAX. Você pode definir facilmente uma solicitação que acionará um conjunto de manipuladores ao concluir. No entanto, cada solicitação pode ser definida com várias chamadas http. Aqui está o componente (e documentação detalhada):

DPAJAX em DepressedPress.com

Este exemplo simples cria uma solicitação com três chamadas e passa essas informações, na ordem de chamada, para um único manipulador:

    // The handler function 
function AddUp(Nums) { alert(Nums[1] + Nums[2] + Nums[3]) }; 

    // Create the pool 
myPool = DP_AJAX.createPool(); 

    // Create the request 
myRequest = DP_AJAX.createRequest(AddUp); 

    // Add the calls to the request 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [5,10]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [4,6]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [7,13]); 

    // Add the request to the pool 
myPool.addRequest(myRequest); 

Observe que, diferentemente de muitas outras soluções (inclusive, acredito que a solução "quando" no jquery), desde que esse método não force o encadeamento único das chamadas feitas - cada uma ainda será executada tão rapidamente (ou tão lentamente) quanto o ambiente permitir mas o manipulador único será chamado somente quando todos estiverem concluídos. Ele também suporta a configuração de valores de tempo limite e novas tentativas se o seu serviço for um pouco ruim.

Eu achei incrivelmente útil (e incrivelmente simples de entender da perspectiva do código). Chega de encadeamento, contagem de chamadas e economia de saída. Basta configurá-lo e esquecê-lo".

Ok, isso é antigo, mas deixe-me contribuir com minha solução :)

function sync( callback ){
    syncCount--;
    if ( syncCount < 1 ) callback();
}
function allFinished(){ .............. }

window.syncCount = 2;

$.ajax({
    url: 'url',
    success: function(data) {
        sync( allFinished );
    }
});
someFunctionWithCallback( function(){ sync( allFinished ); } )

Também funciona com funções que possuem retorno de chamada. Você define o syncCount e chama a função sync (...) no retorno de chamada de cada ação.

Encontrei uma maneira mais fácil de fazer isso sem a necessidade de métodos extras que organizam uma fila.

JS

$.ajax({
  type: 'POST',
  url: 'ajax1.php',
  data:{
    id: 1,
    cb:'method1'//declaration of callback method of ajax1.php
  },
  success: function(data){
  //catching up values
  var data = JSON.parse(data);
  var cb=data[0].cb;//here whe catching up the callback 'method1'
  eval(cb+"(JSON.stringify(data));");//here we calling method1 and pass all data
  }
});


$.ajax({
  type: 'POST',
  url: 'ajax2.php',
  data:{
    id: 2,
    cb:'method2'//declaration of callback method of ajax2.php
  },
  success: function(data){
  //catching up values
  var data = JSON.parse(data);
  var cb=data[0].cb;//here whe catching up the callback 'method2'
  eval(cb+"(JSON.stringify(data));");//here we calling method2 and pass all data
  }
});


//the callback methods
function method1(data){
//here we have our data from ajax1.php
alert("method1 called with data="+data);
//doing stuff we would only do in method1
//..
}

function method2(data){
//here we have our data from ajax2.php
alert("method2 called with data="+data);
//doing stuff we would only do in method2
//..
}

PHP (ajax1.php)

<?php
    //catch up callbackmethod
    $cb=$_POST['cb'];//is 'method1'

    $json[] = array(
    "cb" => $cb,
    "value" => "ajax1"
    );      

    //encoding array in JSON format
    echo json_encode($json);
?>

PHP (ajax2.php)

<?php
    //catch up callbackmethod
    $cb=$_POST['cb'];//is 'method2'

    $json[] = array(
    "cb" => $cb,
    "value" => "ajax2"
    );      

    //encoding array in JSON format
    echo json_encode($json);
?>

async   : false,

Por padrão, todas as solicitações são enviadas de forma assíncrona (ou seja, isso é definido como verdadeiro por padrão). Se você precisar de solicitações síncronas, configure esta opção para false. Solicitações entre domínios e dataType: "jsonp"solicitações não suportam operação síncrona. Observe que solicitações síncronas podem bloquear temporariamente o navegador, desativando qualquer ação enquanto a solicitação estiver ativa. A partir do jQuery 1.8 , o uso de async: falsecom jqXHR ( $.Deferred) está obsoleto; você deve usar as opções de retorno de chamada com êxito / erro / concluir , em vez dos métodos correspondentes do objeto jqXHR , como jqXHR.done()o obsoleto jqXHR.success().

$.ajax({type:'POST', url:'www.naver.com', dataType:'text', async:false,
    complete:function(xhr, textStatus){},
    error:function(xhr, textStatus){},
    success:function( data ){
        $.ajax({type:'POST', 
            ....
            ....
            success:function(data){
                $.ajax({type:'POST',
                    ....
                    ....
            }
        }
    });

Me desculpe, mas não posso explicar o que escrevo porque sou coreano que não consegue nem falar uma palavra em inglês. mas acho que você pode entender facilmente.