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

我正在编写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);}); 

使用此设置，插件，保存function和动画都可以正常工作（假设从未出现过错误）。 但是，myAjaxSaveFunction是异步的，可能会返回成功或失败。 我目前在插件中有保存function，调用成功动画。 如果我让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语句中吗？

Answer 1

我建议允许onSave函数返回一个布尔值或一个promise对象。

 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({...}); }