Übergeben Sie ein Array von Zurückgestellten an $ .when ()

Hier ist ein erfundenes Beispiel dafür, was los ist: 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>");
        });
    });
});

Ich möchte "Alles erledigt!" Wird angezeigt, nachdem alle zurückgestellten Aufgaben abgeschlossen wurden, $.when()scheint jedoch nicht zu wissen, wie mit einem Array von zurückgestellten Objekten umgegangen werden soll. "Alles erledigt!" geschieht zuerst, weil das Array kein verzögertes Objekt ist, also geht jQuery vor und geht davon aus, dass es gerade fertig ist.

Ich weiß, dass man die Objekte wie $.when(deferred1, deferred2, ..., deferredX)folgt an die Funktion übergeben könnte, aber es ist nicht bekannt, wie viele verzögerte Objekte in dem tatsächlichen Problem, das ich zu lösen versuche, ausgeführt werden.

Verwenden Sie Folgendes, um ein Array von Werten an eine Funktion zu übergeben, die normalerweise erwartet, dass es sich um separate Parameter handelt. Function.prototype.applyIn diesem Fall benötigen Sie also:

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

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

In ES6 können Sie stattdessen den ... Spread-Operator verwenden:

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

In beiden Fällen .thenmüsste dieser Handler das argumentsArray verarbeiten, um das Ergebnis jedes Versprechens abzurufen , da es unwahrscheinlich ist, dass Sie im Voraus wissen, wie viele formale Parameter der Handler benötigt .

Die obigen Problemumgehungen (danke!) Beheben das Problem, dass die für die verzögerte resolve()Methode bereitgestellten Objekte wiederhergestellt werden, nicht richtig , da jQuery die done()und fail()Rückrufe mit einzelnen Parametern aufruft , nicht mit einem Array. Das heißt, wir müssen das argumentsPseudo-Array verwenden, um alle aufgelösten / zurückgewiesenen Objekte zu erhalten, die vom Array der zurückgestellten zurückgesendet werden, was hässlich ist:

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

Da wir eine Reihe von Verzögerungen übergeben haben, wäre es schön, eine Reihe von Ergebnissen zurückzugewinnen. Es wäre auch schön, ein tatsächliches Array anstelle eines Pseudo-Arrays zurückzugewinnen, damit wir Methoden wie verwenden können Array.sort().

Hier ist eine Lösung, die von der Methode von when.js inspiriert ist when.all(), mit der diese Probleme behoben werden:

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

Jetzt können Sie einfach eine Reihe von zurückgestellten / versprochenen Versprechungen übergeben und eine Reihe von aufgelösten / abgelehnten Objekten in Ihrem Rückruf zurückerhalten, wie folgt:

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

Sie können die whenMethode auf Ihr Array anwenden :

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

$.when.apply($, arr);

Wie arbeiten Sie mit einem Array von jQuery Deferreds?

Wenn Sie mehrere parallele AJAX-Anrufe aufrufen, haben Sie zwei Möglichkeiten, die jeweiligen Antworten zu verarbeiten.

1. Verwenden Sie den synchronen AJAX-Aufruf / nacheinander / nicht empfohlen
2. Verwenden Sie ein Promises'Array, $.whendas promises akzeptiert, und sein Rückruf .donewird aufgerufen, wenn alle promises mit den entsprechenden Antworten erfolgreich zurückgegeben wurden.

Beispiel

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>

Als einfache Alternative, die nicht benötigt $.when.applyoder arraykönnen Sie das folgende Muster verwenden ein einziges Versprechen für mehr parallelen Versprechen zu generieren:

promise = $.when(promise, anotherPromise);

z.B

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

Anmerkungen:

• Ich habe das herausgefunden, nachdem ich gesehen hatte, wie jemand nacheinander Kettenversprechen gemacht hat promise = promise.then(newpromise)
• Der Nachteil ist, dass hinter den Kulissen zusätzliche Versprechungsobjekte erstellt werden und alle am Ende übergebenen Parameter nicht sehr nützlich sind (da sie in zusätzlichen Objekten verschachtelt sind). Für das, was Sie wollen, ist es kurz und einfach.
• Der Vorteil ist, dass kein Array oder Array-Management erforderlich ist.

Ich möchte einen anderen mit $ .each vorschlagen:

1. Wir können die Ajax-Funktion wie folgt deklarieren:

   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. Teil des Codes, in dem wir ein Array von Funktionen mit Ajax zum Senden erstellen:

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

3. Und Funktionen mit dem Senden von Ajax aufrufen:

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

Wenn Sie transpilieren und Zugriff auf ES6 haben, können Sie die Spread-Syntax verwenden, die jedes iterierbare Element eines Objekts als diskretes Argument anwendet, genau so, wie es $.when()benötigt wird.

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

MDN Link - Spread-Syntax

Wenn Sie angleJS oder eine Variante der Q-Versprechen-Bibliothek verwenden, haben Sie eine .all()Methode, die genau dieses Problem löst.

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

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

Siehe die vollständige API:

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

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

Ich hatte einen sehr ähnlichen Fall, in dem ich in jeder Schleife postete und dann in einigen Feldern das HTML-Markup aus den vom Ajax empfangenen Zahlen festlegte. Ich musste dann eine Summe der (jetzt aktualisierten) Werte dieser Felder erstellen und in ein Gesamtfeld einfügen.

Daher bestand das Problem darin, dass ich versuchte, eine Summe für alle Nummern zu erstellen, aber noch keine Daten von den asynchronen Ajax-Aufrufen zurückgekommen waren. Ich musste diese Funktionalität in einigen Funktionen vervollständigen, um den Code wiederverwenden zu können. Meine äußere Funktion wartet auf die Daten, bevor ich dann einige Dinge mit dem vollständig aktualisierten DOM mache.

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