Invocar una función jQuery después de que .each () se haya completado

En jQuery, es posible invocar una devolución de llamada o activar un evento después de una invocación de .each()(o cualquier otro tipo de devolución de llamada iterativo) ha completado .

Por ejemplo, me gustaría completar este "fundido y eliminación"

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

antes de hacer algunos cálculos e insertar nuevos elementos después de $(parentSelect). Mis cálculos son incorrectos si los elementos existentes aún son visibles para jQuery y dormir / retrasar una cantidad arbitraria de tiempo (200 para cada elemento) parece, en el mejor de los casos, una solución frágil.

Puedo fácilmente .bind()la lógica necesaria para una devolución de llamada de evento, pero no estoy seguro de cómo invocar limpiamente .trigger()después de que se haya completado la iteración anterior . Obviamente, no puedo invocar el disparador dentro de la iteración, ya que se dispararía varias veces.

En el caso de $.each(), he considerado agregar algo al final del argumento de datos (que buscaría manualmente en el cuerpo de la iteración) pero odiaría que me obligaran a hacerlo, así que esperaba que hubiera algún otro elegante forma de controlar el flujo con respecto a las devoluciones de llamada iterativas.

Una alternativa a la respuesta de @ tv:

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

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

Tenga en cuenta que .each()sí mismo es sincrónico : la instrucción que sigue a la llamada a .each()se ejecutará solo después de que .each()se complete la llamada. Sin embargo, las operaciones asincrónicas iniciadas en la .each()iteración, por supuesto, continuarán a su manera. Ese es el problema aquí: las llamadas para desvanecer los elementos son animaciones controladas por temporizador, y continúan a su propio ritmo.

La solución anterior, por lo tanto, realiza un seguimiento de cuántos elementos se desvanecen. Cada llamada a .fadeOut()recibe una devolución de llamada de finalización. Cuando la devolución de llamada se da cuenta de que se cuenta a través de todos los elementos originales involucrados, se pueden tomar medidas posteriores con la confianza de que todo el desvanecimiento ha finalizado.

Esta es una respuesta de cuatro años (en este momento en 2014). Una forma moderna de hacer esto probablemente implicaría usar el mecanismo de Diferido / Promesa, aunque lo anterior es simple y debería funcionar bien.

Probablemente sea demasiado tarde, pero creo que este código funciona ...

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

Ok, esto podría ser un poco después del hecho, pero .promise () también debería lograr lo que buscas.

Documentación de la promesa

Un ejemplo de un proyecto en el que estoy trabajando:

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

:)

JavaScript se ejecuta sincrónicamente, por lo que lo que coloque después each()no se ejecutará hasta que each()se complete.

Considere la siguiente prueba:

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

Cuando se llama a la alerta, el recuento será igual a 1000000 porque la alerta no se ejecutará hasta each()que finalice.

Encontré muchas respuestas relacionadas con matrices pero no con un objeto json. Mi solución fue simplemente iterar a través del objeto una vez mientras incrementaba un contador y luego, al iterar a través del objeto para ejecutar su código, puede incrementar un segundo contador. Luego, simplemente compara los dos contadores y obtén tu solución. Sé que es un poco torpe, pero hasta ahora no he encontrado una solución más elegante. Este es mi código de ejemplo:

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
}

Como dije, no es el más elegante, pero funciona y funciona bien y todavía no he encontrado una solución mejor.

Saludos, JP

Si está dispuesto a dar un par de pasos, esto podría funcionar. Sin embargo, depende de que las animaciones terminen en orden. No creo que eso deba ser un problema.

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

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

qué pasa

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

Debe poner en cola el resto de su solicitud para que funcione.

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

Me encuentro con el mismo problema y lo resolví con una solución como el siguiente código:

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

});

La solución resuelve el siguiente problema: sincronizar las operaciones asincrónicas iniciadas en la iteración .each (), utilizando el objeto diferido.

Tal vez una respuesta tardía, pero hay un paquete para manejar esto 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');
    });

Estoy usando algo como esto:

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