jQuery parece estar funcionando simultáneamente varias llamadas

Question

Lo sentimos, pero al parecer no entiendo encadenamiento suficiente para averiguar este problema ...

estoy poniendo en práctica un carrusel jQuery plug-in (jCarouselLite) y estoy tratando de añadir una opción de 'eliminar' uno de los elementos de carrusel (actualmente <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)
}

Como no hay manera limpia de 'actualización' el plugin jCarouselLite (tal vez algo Voy a tratar de implementar en el plugin real más adelante) la solución rápida y sucia para esto es simplemente regenerar el carrusel.

El problema es que estoy tratando de desaparecer el elemento se hace clic, sin embargo, parece que el refreshDisplay () es llamado antes de la animación de fundido de salida (y eliminar) el elemento se ha hecho clic se ha completado. He verificado esto comentando la línea de self.refreshDisplay(itemId); y se desvanece y remueve como se esperaba.

Así que supongo que hay una cierta manera que necesito cadena de esto? He hecho un par de horas de lectura sobre cómo funciona el encadenamiento y pensé que entendía, pero al parecer no.

Cualquier y toda ayuda es apreciada, gracias!

Answer 1

El propósito de encadenamiento es permitir que varios comandos para compartir un objeto de base, pero no lo hace porque cada comando que esperar a que el anterior.

Para ello, es necesario utilizar una devolución de llamada. Algo así como

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