使用jQuery延期插件总是调用清理方法

Question

我在写一个jQuery UI插件。在那个插件里面，当一个动作发生时，我将调用其中一个插件选项作为回调。一旦这个回调完成，我想运行一些清理代码。

更具体地说，我的插件使用jQuery UI可拖放和可拖放。在droppble 下降，我调用更新选项中定义的函数。在更新被调用，这是一个AJAX调用，我想执行一些清理。我不希望插件的用户需要执行此清理调用;我希望更新AJAX方法成功后自动发生清理调用。

我想在这里使用jQuery的Deferred有意义。下面是该插件的下降执行一些代码：

self.connectedLists = $(self.options.connectWith) 
    .not(self.list) 
    .droppable({ 
     hoverClass: 'ui-selectablelist-active', 
     drop: function(e, ui) { 
      var sender = $(ui.draggable).closest('ul'), 
       deferred = self.options.update.call(self, e, { 
        sender: sender, 
        receiver: $(this), 
        items: selectedItems 
       }); 

      deferred.then(function() { 
       self.removeSelectedItems(); 
      }); 
     } 
    }); 

而对于插件的实现者的代码如下所示：

update: function (e, ui) { 
    var self = this; 
    return $.post(url, 
      {     
       // some data       
      }) 
      .done(function (data) { 
       console.log('updated!'); 
      }); 
} 

我返回AJAX调用作为承诺的下降回调。在drop drop内部，我想执行清理操作removeSelectedItems总是，所以我使用.then（）函数。它似乎没有运行。

这种模式听起来像一个好主意。任何人都可以用这个设计来帮助我？为什么我的完成函数在下拉回调中运行？

Answer 1

而不是使用.then，请使用.always。

.then用于添加回调延期对象：

deferred.then(donecallbacks,failcallbacks) 

尝试：

self.connectedLists = $(self.options.connectWith) 
    .not(self.list) 
    .droppable({ 
     hoverClass: 'ui-selectablelist-active', 
     drop: function(e, ui) { 
      var sender = $(ui.draggable).closest('ul'), 
       deferred = self.options.update.call(self, e, { 
        sender: sender, 
        receiver: $(this), 
        items: selectedItems 
       }); 

      deferred.always(function() { 
       self.removeSelectedItems(); 
      }); 
     } 
    }); 

更新：

由于开发商将指定更新功能，有总是会有开发人员无法正确地将延迟对象返回给您的可能性。你应该检查一下，并在这种情况下抛出一个优点。

self.connectedLists = $(self.options.connectWith) 
    .not(self.list) 
    .droppable({ 
     hoverClass: 'ui-selectablelist-active', 
     drop: function(e, ui) { 
      var sender = $(ui.draggable).closest('ul'), 
       deferred = self.options.update.call(self, e, { 
        sender: sender, 
        receiver: $(this), 
        items: selectedItems 
       }); 
      if (deferred.always) { 
       deferred.always(function() { 
        self.removeSelectedItems(); 
       }); 
      } 
      else { 
       $.error("Update must return a deferred object."); 
      } 
     } 
    });