Appel d'une fonction jQuery après la fin de .each()

Question

Dans jQuery, est-il possible de invoquer un callback o déclencher un événement après une invocation de .each() (ou tout autre type de callback itératif) dispose de terminé .

Par exemple, je voudrais que ce "fondu-enchaîné" se termine

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

avant de faire quelques calculs et d'insérer nouveau après les éléments $(parentSelect) . Mes calculs sont incorrects si les éléments existants sont toujours visibles pour jQuery et la mise en sommeil/retardement d'une quantité arbitraire de temps (200 pour chaque élément) semble être une solution fragile au mieux.

Je peux facilement .bind() la logique nécessaire à un rappel d'événement, mais je ne suis pas sûr de savoir comment invoquer proprement l'option .trigger() après que l'itération ci-dessus ait terminé . Évidemment, je ne peux pas invoquer le déclencheur à l'intérieur de l'itération car il se déclencherait plusieurs fois.

Dans le cas de $.each() J'ai envisagé d'ajouter quelque chose à la fin de l'argument data (que je rechercherais manuellement dans le corps de l'itération) mais je ne voudrais pas être obligé de le faire. J'espérais donc qu'il existait un autre moyen élégant de contrôler le flux en ce qui concerne les rappels itératifs.

Answer 1

C'est probablement trop tard mais je pense que ce code fonctionne...

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

Answer 2

Une alternative à la réponse de @tv :

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

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

Notez que .each() elle-même est synchrone - la déclaration qui suit l'appel à .each() ne sera exécuté qu'après la .each() l'appel est terminé. Cependant, les opérations asynchrones a commencé dans le .each() itération continueront bien sûr à leur manière. C'est là que le bât blesse : les appels au fondu des éléments sont des animations commandées par un minuteur, et celles-ci se poursuivent à leur propre rythme.

La solution ci-dessus permet donc de savoir combien d'éléments sont en cours d'effacement. Chaque appel à .fadeOut() obtient un rappel d'achèvement. Lorsque le rappel constate qu'il a compté tous les éléments d'origine concernés, une action ultérieure peut être entreprise avec la certitude que le fondu est terminé.

Il s'agit d'une réponse vieille de quatre ans (à ce stade en 2014). Une façon moderne de le faire impliquerait probablement l'utilisation du mécanisme Deferred/Promise, bien que la réponse ci-dessus soit simple et devrait fonctionner parfaitement.

Answer 3

Ok, c'est peut-être un peu après coup, mais .promise() devrait également vous permettre d'obtenir ce que vous recherchez.

Documentation sur les promesses

Un exemple tiré d'un projet sur lequel je travaille :

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

:)

Answer 4

JavaScript s'exécute de manière synchrone, donc tout ce que vous placez après each() ne sera pas exécuté avant que each() est complet.

Considérons le test suivant :

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

Lorsque l'alerte est appelée, le compte sera égal à 1000000 car l'alerte ne sera pas exécutée avant que each() est fait.

Answer 5

J'ai trouvé beaucoup de réponses traitant des tableaux mais pas d'un objet json. Ma solution était simplement d'itérer à travers l'objet une fois en incrémentant un compteur et ensuite, lorsque vous itérez à travers l'objet pour exécuter votre code, vous pouvez incrémenter un deuxième compteur. Ensuite, vous comparez simplement les deux compteurs ensemble et vous obtenez votre solution. Je sais que c'est un peu lourd, mais je n'ai pas trouvé de solution plus élégante jusqu'à présent. Voici mon exemple de code :

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
}

Comme je l'ai dit, ce n'est pas le plus élégant, mais ça marche et ça marche bien et je n'ai pas encore trouvé de meilleure solution.

Santé, JP