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

Question

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

Я реализую плагин JQuery Carousel (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;
 });
},