jQuery插件：调用回调方法，然后可以根据响应调用插件函数答案

【问题标题】：jQuery plugin: invoke callback method that can then invoke plugin functions based on responsejQuery插件：调用回调方法，然后可以根据响应调用插件函数
【发布时间】：2013-03-20 18:22:14
【问题描述】：

我开始编写 jQuery 插件并将它们与 AJAX 集成。我正在减脂并专注于基础知识：

(function($)
{
   function MyPlugin(el, options)
   {
     this.element = $(el);
     this.myInput = false;
     this.options = $.extend(
     {
       onSave:function(){}
     }, options);
     this.initialize();
   }

   $.fn.myPlugin = function(options)
   {
      var control = new MyPlugin(this.get(0), options);
      return control;
   };

   MyPlugin.prototype = 
   {
     initialize:function()
     {
       var me = this;
       //specifics shouldn't really matter
       //it creates some HTML to go inside the element
       //within that HTML is an input, which I can successfully invoke keyup:
       me.myInput.keyup(function(event)
       {
         if(keyPressIsEnter(event)
           me.saveFunction();
       });
     },
     saveFunction:function()
     {
       var value = this.myInput.val();
       this.options.onSave(value);

       //CURRENTLY I CALL SUCCESS ANIMATION
       successAnimation();
     },
     successAnimation:function()
     {
        //do something to the markup within element for success
     },
     failureAnimation:function()
     {
        //do something to the markup within element for failure
     }         
   };
})(jQuery);

假设我有一个 div 并将其设置为使用我的插件，如下所示：

$("myDiv").myPlugin({onSave:function(value){myAjaxSaveFunction(value);});

通过此设置，插件、保存功能和动画都可以正常工作（假设从未出现错误）。但是，myAjaxSaveFunction 是异步的，可能返回成功或失败。我目前在调用成功动画的插件中有保存功能。如果我让 myAjaxSaveFunction 返回 true/false，我可以（理论上）在插件中使用该返回值来确定是运行成功还是失败，但如果函数是异步的，则不能。

那么，这种情况通常是如何处理的？为了重用，我需要能够将处理数据的函数自定义为可选回调，但我需要插件等待它是否根据函数的结果运行成功/失败动画（这可能是异步的，也可能不是）。

@Kevin B：你是在暗示这个吗？

saveFunction:function()
 {
   var value = this.myInput.val();
   var success = this.options.onSave(value);
   if(success)
      successAnimation();
   else
      failureAnimation();
 },

在 this.options.onSave 函数执行时，这不会立即落入 if 语句吗？

【问题讨论】：

P.S.我想避免在我的 AJAX 调用中设置 asynch:false，因为这可能会挂起应用程序。
除了使用 setTimeout 和 setInterval 之外，您不能在 javascript 中“等待”，这在 ajax 中效果不佳。我要做的是允许 onSave 返回布尔值或承诺对象。如果它是一个 promise 对象，它会绑定到 .done 和 .fail 方法并等待响应。
@Kevin B 所以我设置 onSave 来返回一个值？ onSave 是插件的保存函数还是可选回调？
正确。基本上，它可以返回 true/false，也可以返回一个通过或失败的 promise 对象。
让我们continue this discussion in chat

标签： jquery ajax plugins callback

【解决方案1】：

我建议允许 onSave 函数返回布尔值或承诺对象。

saveFunction:function()
 {
   var value = this.myInput.val();
   var success = this.options.onSave(value);
   if(success && success.promise)
       success.promise().done(successAnimation).fail(failureAnimation);
   elseif (success)
      successAnimation();
   else
      failureAnimation();
 },

现在，您可以像这样使用它：

$("myDiv").myPlugin({onSave:function(value){return myAjaxSaveFunction(value);});

function myAjaxSaveFunction(value) {
    return $.ajax({...});
}

【讨论】：

感谢您抽出宝贵时间帮助凯文。