JQuery, кажется, выполняет несколько вызовов одновременно - PullRequest
Новая
       6

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

4 голосов
/ 03 декабря 2010

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

Я реализую плагин карусели 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);, и она постепенно исчезает и удаляется, как и ожидалось.

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

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

1 Ответ

3 голосов
/ 03 декабря 2010

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

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

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