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

【问题标题】：How do I write a jQuery plugin method that accepts a callback function?如何编写一个接受回调函数的 jQuery 插件方法？
【发布时间】：2012-04-11 16:44:15
【问题描述】：

我在 Stack Overflow 上读过几个类似的案例，但还没有一个与我的完全一样。这是我的 jQuery 插件的要点：

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

open() 和 close() 方法涉及到 jQuery 的 slideUp() 和 slideDown() 方法，所以我需要能够调用 close() 方法，然后调用 open() 方法作为回调。但是，当我尝试this solution 时，我没有运气。

【问题讨论】：

标签： javascript jquery jquery-plugins jquery-animate

【解决方案1】：

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

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

您可以使用此代码.. 这是调用作为参数传递的函数（回调）的方式..

【讨论】：

感谢@Paresh Balar 的回复，但我在callback.call($(window)); 线上收到错误Uncaught TypeError: Cannot call method 'call' of undefined
你基本上是对的，除了这是处理 jQuery 的幻灯片动画。见我上面的回答。

【解决方案2】：

郑重声明，这是行不通的：

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

上面的代码清楚地表明，在 jQuery 的幻灯片动画的情况下，脚本的执行不会在调用 open 方法之前等待 close 方法完成。这是我最终确定的解决方案，使用 jQuery Promise 方法：

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

【讨论】：