How to add some jQuery plugin done callback

Question

my question is how to add to some jQuery pugin like this example...

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

add done callback like this...

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

to execute another function....

in my plugin :

(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, help!!

Answer 1

Something like this should work:

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

You would need to create a deferred object to return that represents when all the items have finished loading. You would then need to create another deferred for each iteration of this.each(). When all of those deferreds have been resolved, resolve the one that you returned.