如何编写一个接受回调函数的jQuery插件方法？

Question

I've read a couple of similar cases on Stack Overflow, but not one exactly like mine yet. Here's the gist of my jQuery plugin:

(function($) {
    var methods = {
        init: function() {
            ...
            $(this).myPlugin("close");
            $(this).myPlugin("open");
        },
        open: function() {
            ...
        },
        close: function() {
            ...
        }
    }
})(jQuery);

The open() and close() methods involve jQuery's slideUp() and slideDown() methods, so I need to be able to call the close() method and then call the open() method as a callback. However, when I try this solution I have no luck.

Answer 1

(function($) {
var methods = {
    init: function() {
        ...
        $(this).myPlugin("close",function() {
            $(this).myPlugin("open");
        }
    },
    open: function() {
        ...
    },
    close: function(options, callback) {

        callback.call($(window));
        ...
    }
}
})(jQuery);

You can use this code.. This is the way to call the function(callback) that are passed as a argument..

Answer 2

For the record, this does not work:

(function ($) {
    "use strict";

    var methods = {
        init: function () {
            return this.each(function () {
                $(this).click(function () {
                    $(this).myPlugin("close", function () {
                        $(this).myPlugin("open");
                    });
                });
            });
        },
        open: function () {
            return this.each(function () {
                console.log("open was called");

                $(this).children(":hidden").slideDown("slow");
            });
        },
        close: function (callback) {
            return this.each(function () {
                console.log("close was called");

                $(this).children(":visible").slideUp("slow");

                callback.call($(window));
            });
        }
    };
}(jQuery));

The code above makes it clear that execution of the script does not wait for the close method to finish before calling the open method in the case of jQuery's slide animation. Here's the solution I eventually settled on, using the jQuery promise method:

(function ($) {
    "use strict";

    var methods = {
        init: function () {
            return this.each(function () {
                $(this).click(function () {
                    $(this).myPlugin("toggle");
                });
            });
        },
        toggle: function () {
            return this.each(function () {
                var $openBox = $(this).children(":visible"),
                    $closedBox = $(this).children(":hidden");

                $openBox.slideUp("fast").promise().done(function () {
                    $closedBox.slideDown("fast");
                });
            });
        }
    };
}(jQuery));