javascript - 如何添加一些 jQuery 插件完成回调

Question

我的问题是如何像这个例子一样添加到一些 jQuery pugin ......

$('#Div').myPluginLoad();

像这样添加完成回调...

$('#Div').myPluginLoad().done(function(){
    alert('task finished..!!');
});

执行另一个功能....

在我的插件中：

(function ($) {

    $.fn.extend({    
        myPluginLoad: function (options) {    

            //  defaults
            var defaults = {
                padding: 20,
                mouseOverColor: '#000000',
                mouseOutColor: '#ffffff'
            }    
            var options = $.extend(defaults, options);    
            return this.each(function () {    
                /**
                 *    SOME ASYNC TASK
                 **/    
            });
        }
    });
})(jQuery);

请帮忙！！

Answer 1

像这样的东西应该工作：

(function ($) {

    $.fn.extend({    
        myPluginLoad: function (options) {    
            var def = $.Deferred();

            //  defaults
            var defaults = {
                padding: 20,
                mouseOverColor: '#000000',
                mouseOutColor: '#ffffff'
            }    
            var options = $.extend(defaults, options);
            var deferredList = [];

            this.each(function () { 
                var innerDef = $.Deferred();
                deferredList.push(innerDef.promise());

                $.ajax({...}) //just for example
                .done(function() {
                    innerDef.resolve();                    
                });
            });

            $.when.apply($, deferredList).done(function() {
               def.resolve(); 
            });

            return def.promise();
        }
    });
})(jQuery);

您将需要创建一个延迟对象以返回表示所有项目何时完成加载。然后，您需要为this.each(). 当所有这些延迟都已解决后，请解决您返回的问题。

Answer 2

延迟对象。

(function ($) {

    $.fn.extend({    
        myPluginLoad: function (options) {    

            //  defaults
            var defaults = {
                padding: 20,
                mouseOverColor: '#000000',
                mouseOutColor: '#ffffff'
            }
            var options = $.extend(defaults, options);
            return $.Deferred(function(def){
                // the async task
                setTimeout(function(){
                    def.resolve();
                },5000);
            }).promise();
        }
    });
})(jQuery);

Answer 3

你的意思是回调？？

(function ($) {

    $.fn.extend({    
        myPluginLoad: function (options,callback) {    

            //  defaults
            var defaults = {
                padding: 20,
                mouseOverColor: '#000000',
                mouseOutColor: '#ffffff'
            }    
            var options = $.extend(defaults, options);    
            return this.each(function () {    
                /**
                 *    SOME TASK
                 **/    
            });
            if (typeof callback == 'function') { // make sure the callback is a function
               callback.call(this); // brings the scope to the callback
            }
        }
    });
})(jQuery);

然后像这样使用它

$('#Div').myPluginLoad({
    callback:function(){
       //do your thing here
    }
});