eine jQuery Funktion nach .each() aufgerufen hat

Question

In jQuery abgeschlossen ist, ist es möglich, einen Rückruf aufrufe oder Trigger ein Ereignis nach einem Aufruf von .each() (oder jeder anderen Art von iterativem Rückruf) abgeschlossen .

Zum Beispiel würde Ich mag diese „fade und entfernen“

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

vor einigen Berechnungen zu tun und das Einfügen neue Elemente nach den $(parentSelect) abzuschließen. Meine Berechnungen sind inkorrekt, wenn die vorhandenen Elemente für jQuery noch sichtbar sind und das Einschlafen/Verzögern um eine willkürliche Zeitspanne (200 für jedes Element) bestenfalls als brüchige Lösung erscheint.

Ich kann leicht .bind() die notwendige Logik, um eine Callback-Ereignis, aber ich bin nicht sicher, wie sauber die .trigger() nach der obigen Iteration aufgerufen hat abgeschlossen. Offensichtlich kann ich den Trigger innerhalb der Iteration nicht aufrufen, da er mehrmals ausgelöst würde.

Im Fall $.each() habe ich darüber nachgedacht, etwas zum Ende des Datenarguments hinzuzufügen (das würde ich manuell im Iterationskörper suchen), aber ich würde es hassen gezwungen zu sein, so dass ich gehofft hatte Es gab eine andere elegante Möglichkeit, den Fluss in Bezug auf iterative Rückrufe zu steuern.

Answer 1

Eine Alternative zur Antwort des @ 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 — die Anweisung, die den Aufruf von .each() nur dann ausgeführt wird folgt, ist nach dem .each() Aufruf abgeschlossen ist. Asynchrone Operationen gestartet in der .each() Iteration wird natürlich auf ihre eigene Art und Weise weiter. Das ist 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 an .fadeOut() ruft einen Abschlussrückruf ab. Wenn der Rückruf merkt, dass er durch alle beteiligten Originalelemente gezählt wird, kann eine nachfolgende Aktion mit der Gewissheit ausgeführt werden, dass das gesamte Überblenden beendet ist.

Dies ist eine vier Jahre alte Antwort (zu diesem Zeitpunkt im Jahr 2014). Ein moderner Weg, dies zu tun, würde wahrscheinlich den Deferred/Promise-Mechanismus beinhalten, obwohl das obige einfach ist und gut funktionieren sollte.

Answer 2

Wenn Sie bereit sind, es ein paar Schritte zu machen, könnte dies funktionieren. Es hängt jedoch von der Reihenfolge der Animationen ab. 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(); 
     } 
    }); 
}); 

Answer 3

JavaScript wird synchron ausgeführt. Sie können also nach each() keine Daten eingeben, bis each() 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 der Alarm genannt wird, Zahl 1000000 gleich, weil der Alarm wird erst ausgeführt, wenn each() erfolgt.

Answer 4

was

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

Answer 5

Sie haben den Rest Ihrer Anfrage in die Warteschlange für sie zu arbeiten.

Answer 6

Ich habe eine Menge 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, und dann, wenn ich durch das Objekt iterierte, 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. Das 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 ich schon sagte, es ist nicht das eleganteste, aber es funktioniert und es funktioniert gut und ich habe nicht eine bessere Lösung nur noch nicht gefunden.

Cheers, JP

Answer 7

Ok, das könnte ein wenig nach der Tat, aber .promise() sollte auch das erreichen, was Sie wollen.

Promise documentation

Ein Beispiel aus einem Projekt arbeiten, ich bin:

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

:)

Answer 8

Es ist wahrscheinlich zu spät, aber ich denke, diese Code Arbeit ...

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

Answer 9

Ich treffe das gleiche Problem und ich löste mit einer Lösung wie die folgenden Kabeljau e:

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: die asynchronen Operationen begann im .each() Iteration unter Verwendung der latenten Objekt zu synchronisieren.