Passa un array di differiti a $ .when ()

Ecco un esempio inventato di ciò che sta succedendo: 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>");
        });
    });
});

Voglio "Tutto fatto!" apparire dopo che tutte le attività posticipate sono state completate, ma $.when()non sembra sapere come gestire una matrice di oggetti differiti. "Tutto fatto!" sta accadendo per primo perché l'array non è un oggetto differito, quindi jQuery procede e presuppone che sia stato appena fatto.

So che uno potrebbe passare gli oggetti nella funzione come, $.when(deferred1, deferred2, ..., deferredX)ma non si sa quanti oggetti rinviati ci saranno durante l'esecuzione nel problema reale che sto cercando di risolvere.

Per passare una matrice di valori a qualsiasi funzione che normalmente si aspetta che siano parametri separati, utilizzare Function.prototype.apply, quindi in questo caso è necessario:

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

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

In ES6, invece, è possibile utilizzare l' ... operatore spread :

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

In entrambi i casi, poiché è improbabile che tu sappia in anticipo quanti parametri formali .thensaranno richiesti dal gestore, quel gestore dovrà elaborare l' argumentsarray per recuperare il risultato di ogni promessa.

Le soluzioni alternative sopra (grazie!) Non risolvono correttamente il problema di recuperare gli oggetti forniti al resolve()metodo differito perché jQuery chiama done()e fail()callback con parametri individuali, non un array. Ciò significa che dobbiamo usare lo argumentspseudo-array per ottenere tutti gli oggetti risolti / rifiutati restituiti dall'array di differiti, il che è brutto:

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

Dato che abbiamo passato una serie di rinvii, sarebbe bello recuperare una serie di risultati. Sarebbe anche bello recuperare un array reale anziché uno pseudo-array in modo da poter usare metodi come Array.sort().

Ecco una soluzione ispirata when.js 's when.all()metodo che affronta questi problemi:

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

Ora puoi semplicemente passare un array di rinvii / promesse e recuperare un array di oggetti risolti / rifiutati nel tuo callback, in questo modo:

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

È possibile applicare il whenmetodo all'array:

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

$.when.apply($, arr);

Come si lavora con una matrice di jQuery Deferreds?

Quando si chiamano più chiamate AJAX parallele, sono disponibili due opzioni per gestire le rispettive risposte.

1. Usa chiamata AJAX sincrona / uno dopo l'altro / non raccomandato
2. Utilizzare l' Promises'array e $.whenche accetta promisese .doneviene richiamato il suo callback quando tutti gli promises vengono restituiti correttamente con le rispettive risposte.

Esempio

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>

Come alternativa semplice, che non richiede $.when.applyo an array, è possibile utilizzare il modello seguente per generare un'unica promessa per più promesse parallele:

promise = $.when(promise, anotherPromise);

per esempio

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

Appunti:

• Ho capito questo dopo aver visto le promesse di una catena in sequenza, usando promise = promise.then(newpromise)
• Il rovescio della medaglia è che crea oggetti promettenti in più dietro le quinte e tutti i parametri passati alla fine non sono molto utili (poiché sono nidificati all'interno di oggetti aggiuntivi). Per quello che vuoi anche se è breve e semplice.
• Il lato positivo è che non richiede alcun array o gestione dell'array.

Voglio proporne un altro usando $ .each:

1. Possiamo dichiarare la funzione Ajax come:

   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 del codice in cui creiamo una serie di funzioni con ajax da inviare:

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

3. E chiamare le funzioni con l'invio di ajax:

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

Se esegui la transpiling e hai accesso a ES6, puoi utilizzare la sintassi di spread che applica in modo specifico ogni elemento iterabile di un oggetto come argomento discreto, nel modo giusto $.when().

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

Collegamento MDN - Sintassi diffusa

Se stai usando angularJS o qualche variante della libreria Q promise, hai un .all()metodo che risolve questo esatto problema.

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

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

vedi l'API completa:

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

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

Ho avuto un caso molto simile in cui stavo postando in ogni ciclo e quindi impostando il markup html in alcuni campi dai numeri ricevuti da ajax. Avevo quindi bisogno di fare una somma dei valori (ora aggiornati) di questi campi e posizionarli in un campo totale.

Quindi il problema era che stavo cercando di fare una somma su tutti i numeri ma non erano ancora arrivati ​​dati dalle chiamate asincrone ajax. Avevo bisogno di completare questa funzionalità in alcune funzioni per poter riutilizzare il codice. La mia funzione esterna attende i dati prima che io poi vada a fare alcune cose con il DOM completamente aggiornato.

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