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);

Plz，帮助!!

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
    }
});

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

3 个答案: