11

Eu tenho um script jQuery que inicia duas ou mais operações assíncronas ao mesmo tempo, e gostaria de executar um callback quando todas elas estiverem concluídas. Um exemplo seria iniciar uma animação para esconder a página atual, enquanto faço uma requisição Ajax para carregar o conteúdo da próxima página. Tanto a animação pode terminar primeiro, quanto a requisição. Após ambas estarem terminadas, gostaria de exibir a página nova.

Eu não gostaria que a página nova fosse exibida antes que a anterior estivesse totalmente escondida, nem que o fosse antes de seu conteúdo estar pronto. De modo que o callback final não deve estar nem em um nem em outro evento.

Como fazer? De preferência, estou buscando por uma solução genérica, que funcione com dois ou mais eventos assíncronos simultâneos (é raro, mas poderia por exemplo ter de fazer mais de uma requisição Ajax simultânea, e só executar o callback após ter todos os resultados).

Nota: fiz a pergunta para JavaScript, no geral, mas uma solução específica para jQuery (por exemplo, algo envolvendo Deferreds ou Promises) também estaria de bom tamanho.

3 Respostas 3

9

Como você mencionou, você pode usar jQuery Deferreds (algo como "adiado") e Promises (promessas).

Você chama todas as ações que deseja que ocorram concorrentemente dentro de um $.when(...):

$.when(acao1, acao2)

Note que essas ações devem retornar promessas para que possam ser utilizadas no deferred.

when, então, retorna um Deferred para todas aquelas promessas. É como um objeto para verificar todas as promessas no futuro. Então, você pode chamar then (ou mesmo outras funções de Deferred, como done e fail) com o que você quer que ocorra após que todas as promessas forem cumpridas ou que pelo menos uma promessa não seja cumprida (erro).

$.when(acao1, acao2).then(
  function(resultadoAcao1, resultadoAcao2) {
    // roda depois de acao1 e acao2 terminarem
  }, 
  function(resultadoAcaoErro) {
    // a primeira ação com erro termina aqui com o resultado do erro
  }
});

Em caso de sucesso, os resultados das ações são passados para o primeiro callback de then na ordem que as ações foram chamadas. Caso qualquer ação resulte em um erro, o segundo callback é chamado com esse erro. As outras ações são ignoradas nesse caso. (Veja exemplo aqui).

Seu exemplo fica assim (sem tratamento de erro):

$.when(
    // Ação 1: esconder a página
    $(".pagina:eq(0)").hide(Math.random()*4000).promise(),
    // Ação 2: carregar a nova
    $.getJSON('http://services.odata.org/OData/OData.svc/Products?$format=json'))
.then(function (hidden, jsonRequest) {
    $(".pagina:eq(1)")
        .find("strong")
        .text(jsonRequest[0].value[0].Name)
    $(".pagina:eq(1)").show(2000);
});

Note que alterei getJSON para buscar um JSON na internet, e que chamo promise para poder usar hide como um deferred para sua animação (getJSON já retorna uma promessa).

1
  • 3
    Ótima resposta, na verdade já tinha lido sobre o when mas não me lembrava dele. E isso de chamar o promise no retorno do hide é novidade pra mim, achei que fosse ser um obstáculo para se usar Promises mas vejo que não é. +1 e aceito!
    – mgibsonbr
    Commented 21/01/2014 às 14:49
6

O fato dos browsers usaram um único thread para o código JavaScript da página facilita bastante, pois há a garantia de que uma função invocada execute do início ao fim antes que uma outra função concorrente o faça (i.e. não há problema de concorrência, cada event handler como um todo pode ser considerado atômico). Desse modo, é simples implementar um semáforo, que acumula os resultados dos callbacks individuais e só chama o callback final depois que todas as chamadas individuais estiverem completas:

/* Recebe o número de operações assíncronas, e o callback a ser executado no final */
function semaforo(numero, callback) {
    var array = []; // Acumula os resultados de cada evento assíncrono individual

    /* Retorna um proxy a ser usado no lugar do event handler 
       Os argumentos são o índice daquele evento em particular, e o handler verdadeiro
    */
    return function proxy(indice, fn) {
        if ( !fn ) fn = function() { };
        return function handler() {
            array[indice] = fn.apply(this, arguments); // Chama o handler e guarda o result.
            if ( --numero == 0 )             // Se todos os eventos terminaram,
                callback.apply(this, array); // chama o callback com os resultados
        }
    }
}

Exemplo de uso:

var proxy = semaforo(2, function() { $("#novaTela").show(2000); });

$("#telaAntiga").hide(2000, proxy(0)); // Primeiro evento assíncrono

$.getJSON(url, data, proxy(1, function(json) { return json; })); // Segundo evento

Exemplo no jsFiddle.

3

Complementando o exemplo do Jordão, você poderia usar também o objeto jQuery.Deferred alem de fazer alguns testes no $.when para ter certeza que tudo foi executado corretamente e dai sim resolver esse Deferred e executar o código. O funcionamento é similar, porem é interessante separar os conceitos.

ready = $.Deferred();

$.when(animacao, json)
  .done(animacaoResposta, jsonResposta, function() {
    if(jsonReposta[0].error) {
      console.log(jsonReposta[0].error);
    }
    else {
      ready.resolve();
    }
  })
  .fail(function() {
      console.log('Alguma coisa deu errado');
  });

ready.done(function () {
    // executa seu código com certeza que tudo deu certo
});

Exemplo: http://jsfiddle.net/gilbarbara/xNL7J/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .