jQuery semble être en cours d'exécution simultanément plusieurs appels

Question

Désolé, mais apparemment je ne comprends pas assez enchaînant pour comprendre ce problème ...

Je suis un plugin carrousel mise en œuvre jQuery (jCarouselLite) et je suis en train d'ajouter une option « supprimer » l'un des éléments de carrousel (actuellement <div class="remove">) ...

initEvents: function() {
        var self = this;
        // Bind jQuery event for REMOVE button click
        $('.remove').live('click', function() {     
            // Need to save the ID that we're removing
            var item = $(this).closest('li.sort');
            var itemId = item.attr("id");

            $(this).removeItem();

            self.refreshDisplay(itemId);
        }); 


 $.fn.removeItem = (function() {
  var item = this.closest('li.sort'); // could save this call by passing param

  item.fadeOut("normal", function() {
         $(this).remove();
      });

   // preserve jQuery chain
   return this;
 });
},

refreshDisplay(itemId) {
  // ...
  // redraws carousel
  // ...
  // itemId is used to remove from the array of Items to show (class-wide scope)
}

Comme il n'y a aucun moyen propre à « rafraîchir » le plugin jCarouselLite (peut-être quelque chose que je vais essayer de mettre en œuvre dans le plug-in réelle plus tard) la solution rapide et sale pour cela est de régénérer tout le carrousel.

La question est appelée avant l'animation de la sortie en fondu (et la suppression) l'élément cliqué est terminé est que je suis en train de disparaître l'élément cliqué, cependant, il semble que le refreshDisplay (). Je l'ai vérifié cela en commentant la ligne de self.refreshDisplay(itemId); et il disparaît et Enlève comme prévu.

Je suppose qu'il ya une certaine façon je dois chaîne cela? J'ai fait deux heures de lecture sur la façon dont enchaînant les travaux et je pensais que je l'ai compris, mais apparemment pas.

Toute aide est appréciée, merci!

Answer 1

Le but de chaînage est de permettre à plusieurs commandes de partager un objet de base, mais il ne provoque pas chaque commande d'attendre le précédent.

Pour cela, vous devez utiliser un rappel. Quelque chose comme

initEvents: function() {
        var self = this;
        // Bind jQuery event for REMOVE button click
        $('.remove').live('click', function() {     
            // Need to save the ID that we're removing
            var item = $(this).closest('li.sort');
            var itemId = item.attr("id");

            $(this).removeItem(function() {
                self.refreshDisplay(itemId);
            });
        }); 


 $.fn.removeItem = (function(callback) {
  var item = this.closest('li.sort'); // could save this call by passing param

  item.fadeOut("normal", function() {
         $(this).remove();
         callback();  //now your refresh is being called after the fade.
      });

   // preserve jQuery chain
   return this;
 });
},