javascript - jQuery似乎同时运行多个调用

抱歉，但显然我对链接的理解不足以解决此问题...

我正在实现一个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插件的干净方法(也许稍后我会尝试在实际插件中实现)，对此的快速而肮脏的解决方法是重新生成Carousel。

问题是我正在尝试淡出被单击的元素，但是，似乎在淡出(并移除)被单击的项目的动画之前调用了refreshDisplay()。我已经通过注释掉self.refreshDisplay(itemId);行验证了这一点，它逐渐淡出并按预期方式删除。

所以我想有某种方式需要链接此链接？我已经阅读了两个小时，以了解链的工作原理，我以为我理解了，但显然不是。

任何和所有帮助表示感谢，谢谢!

最佳答案

链接的目的是允许多个命令共享一个基础对象，但这不会导致每个命令都等待上一个命令。

为此，您需要使用回调。就像是

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