JQuery, кажется, работает несколько вызовов одновременно

Question

Извините, но, видимо, я не понимаю, цепочки достаточно, чтобы понять эту проблему ...

Я реализует карусельного плагин JQuery (jCarouselLite), и я пытаюсь добавить опцию «удалить» один из пунктов карусельных (в настоящее время <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) 
} 

Поскольку нет чистого способа «обновлений» плагин jCarouselLite (возможно, что-то я попробовать реализовать в фактическом плагин позже) быстрое и грязное исправление для этого - просто восстановить карусель.

Проблема заключается в том, что я пытаюсь угаснуть элемент, нажав, однако, кажется, что refreshDisplay() вызывается до того, как анимация затухания (и удаления) завершена. Я проверил это, комментируя строку self.refreshDisplay(itemId);, и она исчезает и удаляется, как ожидалось.

Итак, я уверен, что мне нужно связать это? Я проделал пару часов чтения о том, как цепочки работают, и я думал, что понял это, но, видимо, нет.

Любая помощь приветствуется, спасибо!

Answer 1

Цель цепочки состоит в том, чтобы позволить нескольким командам совместно использовать базовый объект, но это не приводит к тому, что каждая команда ожидает предыдущего.

Для этого вам необходимо использовать обратный вызов. Что-то вроде

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