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

Posted 2023-05-08

【中文标题】如何编写一个接受回调函数的 jQuery 插件方法？

【英文标题】：How do I write a jQuery plugin method that accepts a callback function?

【发布时间】：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 时，我没有运气。

【参考方案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));