Wywoływanie funkcji jQuery po zakończeniu funkcji .each ()

W jQuery, jest to możliwe do wywołania zwrotnego lub wyzwolić zdarzenie po wystąpieniu pw .each()(lub innego rodzaju iteracyjnej zwrotnego) jest wypełniony .

Na przykład chciałbym, aby to „znikanie i usuwanie” zakończyło się

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

przed wykonaniem obliczeń i wstawieniem nowych elementów po $(parentSelect). Moje obliczenia są niepoprawne, jeśli istniejące elementy są nadal widoczne dla jQuery, a uśpienie / opóźnienie dowolnej ilości czasu (200 dla każdego elementu) wydaje się najlepszym rozwiązaniem kruchym.

Mogę łatwo .bind()niezbędne do zwrotnego logika zdarzeń, ale nie jestem pewien, jak czysto Wywołuje .trigger()po wyżej iteracji została zakończona . Oczywiście nie mogę wywołać wyzwalacza wewnątrz iteracji, ponieważ byłby uruchamiany wiele razy.

W przypadku $.each()rozważałem dodanie czegoś na końcu argumentu danych (którego ręcznie szukałem w treści iteracji), ale nie chciałbym być do tego zmuszony, więc miałem nadzieję, że jest jakiś inny elegancki sposób kontrolowania przepływu w odniesieniu do iteracyjnych wywołań zwrotnych.

Alternatywa dla odpowiedzi @ tv:

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

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

Zauważ, że .each()sama jest synchroniczna - instrukcja następująca po wywołaniu .each()zostanie wykonana dopiero po zakończeniu .each()połączenia. Jednak operacje asynchroniczne rozpoczęte w .each()iteracji będą oczywiście kontynuowane na swój własny sposób. Na tym polega problem: wezwania do zanikania elementów są animacjami sterowanymi zegarem, a te kontynuowane są we własnym tempie.

Dlatego powyższe rozwiązanie śledzi liczbę wyblakłych elementów. Każde połączenie do .fadeOut()otrzymuje oddzwonienie zakończenia. Gdy wywołanie zwrotne zauważy, że jest liczone przez wszystkie pierwotne elementy, można podjąć pewne dalsze działania z pewnością, że wszystkie wygaszanie zostało zakończone.

To czteroletnia odpowiedź (w tym momencie w 2014 r.). Nowoczesny sposób na to prawdopodobnie wymagałby użycia mechanizmu odroczenia / obietnicy, chociaż powyższe jest proste i powinno działać dobrze.

Prawdopodobnie jest za późno, ale myślę, że ten kod działa ...

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

Ok, może to być trochę po fakcie, ale .promise () powinien również osiągnąć to, czego szukasz.

Dokumentacja obietnicy

Przykład z projektu, nad którym pracuję:

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

:)

JavaScript działa synchronicznie, więc cokolwiek umieścisz po nim each(), nie będzie działać, dopóki nie each()zostanie ukończone.

Rozważ następujący 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);

Po wywołaniu alertu liczba wyniesie 1000000, ponieważ alert nie zostanie uruchomiony, dopóki nie each()zostanie zakończony.

Znalazłem wiele odpowiedzi dotyczących tablic, ale nie obiektu Json. Moim rozwiązaniem było po prostu iterowanie obiektu raz podczas zwiększania licznika, a następnie podczas iterowania obiektu w celu wykonania kodu można zwiększyć drugi licznik. Następnie po prostu porównujesz oba liczniki razem i dostajesz swoje rozwiązanie. Wiem, że to trochę niezgrabne, ale jak dotąd nie znalazłem bardziej eleganckiego rozwiązania. To jest mój przykładowy kod:

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
}

Jak powiedziałem, nie jest to najbardziej elegancki, ale działa i działa dobrze, a ja jeszcze nie znalazłem lepszego rozwiązania.

Pozdrawiam, JP

Jeśli chcesz zrobić to kilka kroków, może to zadziałać. Zależy to jednak od kolejności kończenia animacji. Nie sądzę, że powinien to być problem.

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

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

co powiesz na

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

Aby kolejność zadziałała, musisz ustawić w kolejce resztę żądania.

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

Napotykam ten sam problem i rozwiązałem go za pomocą następującego rozwiązania:

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

});

Rozwiązanie rozwiązuje następujący problem: zsynchronizować operacje asynchroniczne rozpoczęte w iteracji .each (), używając obiektu Odroczony.

Może spóźniona odpowiedź, ale istnieje pakiet do obsługi tego https://github.com/ACFBentveld/Await

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

Używam czegoś takiego:

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