Aufrufen einer jQuery-Funktion nach Abschluss von .each ()

In jQuery ist es möglich, einen Rückruf aufzurufen oder ein Ereignis auszulösen, nachdem ein Aufruf von .each()(oder einer anderen Art von iterativem Rückruf) abgeschlossen wurde .

Zum Beispiel möchte ich, dass dieses "Ausblenden und Entfernen" abgeschlossen wird

$(parentSelect).nextAll().fadeOut(200, function() {
    $(this).remove();
});

bevor Sie einige Berechnungen durchführen und neue Elemente nach dem einfügen $(parentSelect). Meine Berechnungen sind falsch, wenn die vorhandenen Elemente für jQuery noch sichtbar sind und das Schlafen / Verzögern einer beliebigen Zeitspanne (200 für jedes Element) bestenfalls als spröde Lösung erscheint.

Ich kann leicht .bind()die notwendige Logik zu einem Ereignisse Rückruf , aber ich bin nicht sicher , wie invoke die sauber .trigger()nach dem obigen Iteration abgeschlossen . Offensichtlich kann ich den Trigger innerhalb der Iteration nicht aufrufen, da er mehrmals ausgelöst würde.

Im Fall von $.each()habe ich darüber nachgedacht, am Ende des Datenarguments etwas hinzuzufügen (nach dem ich im Iterationskörper manuell gesucht habe), aber ich würde es hassen, dazu gezwungen zu werden, also hoffte ich, dass es noch etwas anderes Elegantes gibt Möglichkeit, den Fluss in Bezug auf iterative Rückrufe zu steuern.

Eine Alternative zur Antwort von @ tv:

var elems = $(parentSelect).nextAll(), count = elems.length;

elems.each( function(i) {
  $(this).fadeOut(200, function() { 
    $(this).remove(); 
    if (!--count) doMyThing();
  });
});

Beachten Sie, dass .each()selbst synchron ist - die Anweisung, die auf den Aufruf von folgt, .each()wird erst ausgeführt, nachdem der .each()Aufruf abgeschlossen ist. Asynchrone Operationen, die in der .each()Iteration gestartet wurden, werden natürlich auf ihre eigene Weise fortgesetzt. Das ist hier das Problem: Die Aufrufe zum Ausblenden der Elemente sind zeitgesteuerte Animationen, und diese werden in ihrem eigenen Tempo fortgesetzt.

Die obige Lösung verfolgt daher, wie viele Elemente ausgeblendet werden. Jeder Anruf .fadeOut()erhält einen Abschlussrückruf. Wenn der Rückruf feststellt, dass er durch alle beteiligten Originalelemente gezählt wird, können einige nachfolgende Maßnahmen mit der Gewissheit ausgeführt werden, dass das gesamte Ausbleichen abgeschlossen ist.

Dies ist eine vier Jahre alte Antwort (zu diesem Zeitpunkt im Jahr 2014). Ein moderner Weg, dies zu tun, würde wahrscheinlich die Verwendung des Mechanismus "Zurückgestellt / Versprechen" beinhalten, obwohl das oben Genannte einfach ist und gut funktionieren sollte.

Es ist wahrscheinlich zu spät, aber ich denke, dieser Code funktioniert ...

$blocks.each(function(i, elm) {
 $(elm).fadeOut(200, function() {
  $(elm).remove();
 });
}).promise().done( function(){ alert("All was done"); } );

Ok, das könnte etwas später sein, aber .promise () sollte auch das erreichen, wonach Sie suchen.

Versprechen Dokumentation

Ein Beispiel aus einem Projekt, an dem ich arbeite:

$( '.panel' )
    .fadeOut( 'slow')
    .promise()
    .done( function() {
        $( '#' + target_panel ).fadeIn( 'slow', function() {});
    });

:) :)

JavaScript wird synchron ausgeführt, sodass alles, was Sie danach platzieren each(), erst ausgeführt wird, wenn each()es abgeschlossen ist.

Betrachten Sie den folgenden Test:

var count = 0;
var array = [];

// populate an array with 1,000,000 entries
for(var i = 0; i < 1000000; i++) {
    array.push(i);
}

// use each to iterate over the array, incrementing count each time
$.each(array, function() {
    count++
});

// the alert won't get called until the 'each' is done
//      as evidenced by the value of count
alert(count);

Wenn die Warnung aufgerufen wird, entspricht die Anzahl 1000000, da die Warnung erst ausgeführt wird, wenn sie abgeschlossen each()ist.

Ich habe viele Antworten gefunden, die sich mit Arrays befassen, aber nicht mit einem JSON-Objekt. Meine Lösung bestand einfach darin, das Objekt einmal zu durchlaufen, während ein Zähler inkrementiert wurde. Wenn Sie dann das Objekt durchlaufen, um Ihren Code auszuführen, können Sie einen zweiten Zähler inkrementieren. Dann vergleichen Sie einfach die beiden Zähler miteinander und erhalten Ihre Lösung. Ich weiß, dass es etwas klobig ist, aber ich habe bisher keine elegantere Lösung gefunden. Dies ist mein Beispielcode:

var flag1 = flag2 = 0;

$.each( object, function ( i, v ) { flag1++; });

$.each( object, function ( ky, val ) {

     /*
        Your code here
     */
     flag2++;
});

if(flag1 === flag2) {
   your function to call at the end of the iteration
}

Wie gesagt, es ist nicht das eleganteste, aber es funktioniert und es funktioniert gut und ich habe noch keine bessere Lösung gefunden.

Prost, JP

Wenn Sie bereit sind, ein paar Schritte zu machen, könnte dies funktionieren. Es hängt jedoch davon ab, ob die Animationen in der richtigen Reihenfolge beendet werden. Ich denke nicht, dass das ein Problem sein sollte.

var elems = $(parentSelect).nextAll();
var lastID = elems.length - 1;

elems.each( function(i) {
    $(this).fadeOut(200, function() { 
        $(this).remove(); 
        if (i == lastID) {
           doMyThing();
        }
    });
});

wie wäre es mit

$(parentSelect).nextAll().fadeOut(200, function() { 
    $(this).remove(); 
}).one(function(){
    myfunction();
}); 

Sie müssen den Rest Ihrer Anfrage in die Warteschlange stellen, damit sie funktioniert.

var elems = $(parentSelect).nextAll();
var lastID = elems.length - 1;

elems.each( function(i) {
    $(this).fadeOut(200, function() { 
        $(this).remove(); 
        if (i == lastID) {
            $j(this).queue("fx",function(){ doMyThing;});
        }
    });
});

Ich treffe das gleiche Problem und habe es mit einer Lösung wie dem folgenden Code gelöst:

var drfs = new Array();
var external = $.Deferred();
drfs.push(external.promise());

$('itemSelector').each( function() {
    //initialize the context for each cycle
    var t = this; // optional
    var internal = $.Deferred();

    // after the previous deferred operation has been resolved
    drfs.pop().then( function() {

        // do stuff of the cycle, optionally using t as this
        var result; //boolean set by the stuff

        if ( result ) {
            internal.resolve();
        } else {
            internal.reject();
        }
    }
    drfs.push(internal.promise());
});

external.resolve("done");

$.when(drfs).then( function() {
    // after all each are resolved

});

Die Lösung löst das folgende Problem: Synchronisieren der in der .each () - Iteration gestarteten asynchronen Operationen mithilfe des Objekts "Zurückgestellt".

Möglicherweise eine späte Antwort, aber es gibt ein Paket, das diese https://github.com/ACFBentveld/Await behandelt

 var myObject = { // or your array
        1 : 'My first item',
        2 : 'My second item',
        3 : 'My third item'
    }

    Await.each(myObject, function(key, value){
         //your logic here
    });

    Await.done(function(){
        console.log('The loop is completely done');
    });

Ich benutze so etwas:

$.when(
           $.each(yourArray, function (key, value) {
                // Do Something in loop here
            })
          ).then(function () {
               // After loop ends.
          });