Passe uma matriz de adiados para $ .when ()

Aqui está um exemplo artificial do que está acontecendo: http://jsfiddle.net/adamjford/YNGcm/20/

HTML:

<a href="#">Click me!</a>
<div></div>

JavaScript:

function getSomeDeferredStuff() {
    var deferreds = [];

    var i = 1;
    for (i = 1; i <= 10; i++) {
        var count = i;

        deferreds.push(
        $.post('/echo/html/', {
            html: "<p>Task #" + count + " complete.",
            delay: count
        }).success(function(data) {
            $("div").append(data);
        }));
    }

    return deferreds;
}

$(function() {
    $("a").click(function() {
        var deferreds = getSomeDeferredStuff();

        $.when(deferreds).done(function() {
            $("div").append("<p>All done!</p>");
        });
    });
});

Eu quero "Tudo pronto!" apareça após a conclusão de todas as tarefas adiadas, mas $.when()não parece saber como lidar com uma matriz de objetos adiados . "Tudo feito!" está acontecendo primeiro porque o array não é um objeto Adiado, portanto, o jQuery segue em frente e assume que acabou de terminar.

Eu sei que é possível passar os objetos para a função, $.when(deferred1, deferred2, ..., deferredX)mas não se sabe quantos objetos adiados haverá em execução no problema real que estou tentando resolver.

Para passar uma matriz de valores para qualquer função que normalmente espera que sejam parâmetros separados, use Function.prototype.apply, portanto, neste caso, você precisa:

$.when.apply($, my_array).then( ___ );

Consulte http://jsfiddle.net/YNGcm/21/

No ES6, você pode usar o ... operador de spread :

$.when(...my_array).then( ___ );

Em qualquer um dos casos, como é improvável que você saiba com antecedência quantos parâmetros formais o .thenmanipulador precisará, esse manipulador precisaria processar a argumentsmatriz para recuperar o resultado de cada promessa.

As soluções alternativas acima (obrigado!) Não abordam adequadamente o problema de retornar os objetos fornecidos ao resolve()método do adiado, porque o jQuery chama os retornos de chamada done()e fail()com parâmetros individuais, não uma matriz. Isso significa que precisamos usar o argumentspseudo-array para obter todos os objetos resolvidos / rejeitados retornados pelo array de diferidos, o que é feio:

$.when.apply($,deferreds).then(function() {
     var objects=arguments; // The array of resolved objects as a pseudo-array
     ...
};

Como passamos uma série de adiados, seria bom recuperar uma série de resultados. Também seria bom recuperar uma matriz real em vez de uma pseudo-matriz, para que possamos usar métodos como Array.sort().

Aqui está uma solução inspirada por when.js 's when.all()método que aborda estes problemas:

// Put somewhere in your scripting environment
if (typeof jQuery.when.all === 'undefined') {
    jQuery.when.all = function (deferreds) {
        return $.Deferred(function (def) {
            $.when.apply(jQuery, deferreds).then(
                function () {
                    def.resolveWith(this, [Array.prototype.slice.call(arguments)]);
                },
                function () {
                    def.rejectWith(this, [Array.prototype.slice.call(arguments)]);
                });
        });
    }
}

Agora você pode simplesmente passar uma matriz de adiados / promessas e recuperar uma matriz de objetos resolvidos / rejeitados em seu retorno de chamada, assim:

$.when.all(deferreds).then(function(objects) {
    console.log("Resolved objects:", objects);
});

Você pode aplicar o whenmétodo à sua matriz:

var arr = [ /* Deferred objects */ ];

$.when.apply($, arr);

Como você trabalha com uma matriz de adiados jQuery?

Ao chamar várias chamadas paralelas AJAX, você tem duas opções para manipular as respectivas respostas.

1. Usar chamada AJAX síncrona / uma após a outra / não recomendado
2. Use Promises'array e $.whenque aceite promises e seu retorno de chamada .doneseja chamado quando todos os promises retornarem com êxito com as respectivas respostas.

Exemplo

function ajaxRequest(capitalCity) {
   return $.ajax({
        url: 'https://restcountries.eu/rest/v1/capital/'+capitalCity,
        success: function(response) {
        },
        error: function(response) {
          console.log("Error")
        }
    });
}
$(function(){
   var capitalCities = ['Delhi', 'Beijing', 'Washington', 'Tokyo', 'London'];
   $('#capitals').text(capitalCities);

   function getCountryCapitals(){ //do multiple parallel ajax requests
      var promises = [];   
      for(var i=0,l=capitalCities.length; i<l; i++){
            var promise = ajaxRequest(capitalCities[i]);
            promises.push(promise);
      }
  
      $.when.apply($, promises)
        .done(fillCountryCapitals);
   }
  
   function fillCountryCapitals(){
        var countries = [];
        var responses = arguments;
        for(i in responses){
            console.dir(responses[i]);
            countries.push(responses[i][0][0].nativeName)
        }  
        $('#countries').text(countries);
   }
  
   getCountryCapitals()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h4>Capital Cities : </h4> <span id="capitals"></span>
  <h4>Respective Country's Native Names : </h4> <span id="countries"></span>
</div>

Como uma alternativa simples, que não exige $.when.applyou arrayvocê pode usar o seguinte padrão para gerar uma única promessa para várias promessas paralelas:

promise = $.when(promise, anotherPromise);

por exemplo

function GetSomeDeferredStuff() {
    // Start with an empty resolved promise (or undefined does the same!)
    var promise;
    var i = 1;
    for (i = 1; i <= 5; i++) {
        var count = i;

        promise = $.when(promise,
        $.ajax({
            type: "POST",
            url: '/echo/html/',
            data: {
                html: "<p>Task #" + count + " complete.",
                delay: count / 2
            },
            success: function (data) {
                $("div").append(data);
            }
        }));
    }
    return promise;
}

$(function () {
    $("a").click(function () {
        var promise = GetSomeDeferredStuff();
        promise.then(function () {
            $("div").append("<p>All done!</p>");
        });
    });
});

Notas:

• Eu descobri isso depois de ver alguém prometer em cadeia sequencialmente, usando promise = promise.then(newpromise)
• A desvantagem é que ele cria objetos de promessa extra nos bastidores e quaisquer parâmetros passados ​​no final não são muito úteis (pois estão aninhados dentro de objetos adicionais). Para o que você quer, embora seja curto e simples.
• O lado positivo é que ele não requer matriz ou gerenciamento de matriz.

Quero propor outro usando $ .each:

1. Podemos declarar a função ajax como:

   function ajaxFn(someData) {
       this.someData = someData;
       var that = this;
       return function () {
           var promise = $.Deferred();
           $.ajax({
               method: "POST",
               url: "url",
               data: that.someData,
               success: function(data) {
                   promise.resolve(data);
               },
               error: function(data) {
                   promise.reject(data);
               }
           })
           return promise;
       }
   }

2. Parte do código onde criamos uma matriz de funções com o ajax para enviar:

   var arrayOfFn = [];
   for (var i = 0; i < someDataArray.length; i++) {
       var ajaxFnForArray = new ajaxFn(someDataArray[i]);
       arrayOfFn.push(ajaxFnForArray);
   }

3. E chamando funções com o envio de ajax:

   $.when(
       $.each(arrayOfFn, function(index, value) {
           value.call()
       })
   ).then(function() {
           alert("Cheer!");
       }
   )

Se você estiver transpilando e tiver acesso ao ES6, poderá usar a sintaxe de propagação, que aplica especificamente cada item iterável de um objeto como um argumento discreto, da maneira que for $.when()necessária.

$.when(...deferreds).done(() => {
    // do stuff
});

Link MDN - Sintaxe de propagação

Se você estiver usando angularJS ou alguma variante da biblioteca Q promessa, então você tem um .all()método que resolve esse problema exato.

var savePromises = [];
angular.forEach(models, function(model){
  savePromises.push(
    model.saveToServer()
  )
});

$q.all(savePromises).then(
  function success(results){...},
  function failed(results){...}
);

veja a API completa:

https://github.com/kriskowal/q/wiki/API-Reference#promiseall

https://docs.angularjs.org/api/ng/service/$q

Eu tive um caso muito parecido em que eu estava postando em cada loop e, em seguida, definindo a marcação html em alguns campos dos números recebidos do ajax. Eu então precisava fazer uma soma dos valores (agora atualizados) desses campos e colocar em um campo total.

Assim, o problema era que eu estava tentando fazer uma soma em todos os números, mas nenhum dado havia chegado ainda das chamadas assíncronas ajax. Eu precisava concluir essa funcionalidade em algumas funções para poder reutilizar o código. Minha função externa aguarda os dados antes de eu fazer algumas coisas com o DOM totalmente atualizado.

    // 1st
    function Outer() {
        var deferreds = GetAllData();

        $.when.apply($, deferreds).done(function () {
            // now you can do whatever you want with the updated page
        });
    }

    // 2nd
    function GetAllData() {
        var deferreds = [];
        $('.calculatedField').each(function (data) {
            deferreds.push(GetIndividualData($(this)));
        });
        return deferreds;
    }

    // 3rd
    function GetIndividualData(item) {
        var def = new $.Deferred();
        $.post('@Url.Action("GetData")', function (data) {
            item.html(data.valueFromAjax);
            def.resolve(data);
        });
        return def;
    }