jQuery 似乎同时运行多个调用

Question

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

我正在实现一个 jQuery 轮播插件（jCarouselLite），并且我正在尝试添加一个选项来“删除”其中一个轮播项目（目前

)...

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 插件（也许我稍后会尝试在实际插件中实现）快速且对此的肮脏修复是重新生成轮播。

问题是我试图淡出单击的元素，但是，似乎在淡出（并删除）单击的项目的动画完成之前调用了刷新显示（）。我已经通过注释掉 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;
 });
},