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插件（可能会在稍后的实际插件中尝试实现），快速而肮脏的修复就是重新生成Carousel。

问题是我正在尝试淡出单击的元素，但是，似乎在淡出（和删除）单击项目的动画完成之前调用了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;
 });
},

jQuery似乎同时运行多个调用

1 个答案: