jquery - 编写允许链接的 jQuery 函数

Question

我想编写一些代码，允许我用执行不同操作的函数替换 jQuery 的 animate 函数，但仍然允许我在完成时调用辅助函数。

目前，我正在编写很多这样的代码；

if (cssTransitions) {
   $("#content_box").css("height",0);

   window.setTimeout(function() {
       secondFunction(); 
   }, 600);
} else {
    $("#content_box").animate({
        height:0
    }, 600, function() {                
        secondFunction();
    });
}

我更愿意编写一个如下所示的函数:

function slideUpContent(object) {
    if (cssTransitions) {
         object.css("height",0);
         // Not sure how I get a callback here
    } else {
        $("#content_box").animate({
            height:0
        }, 600, function() {
        });
    }
}

我可以这样使用:

slideUpContent("#content_box", function(){
    secondFunction();
});

但我不确定如何获得我需要的功能 - 即在我的函数完成后运行另一个函数的方法。

谁能帮助我那困惑的大脑吗？

Answer 1

您正在寻找的功能称为回调。

实现起来很简单。只需将匿名函数(或其他函数)作为参数传递，然后通过附加括号调用传入的变量callback()(显然首先检查它是否是有效函数)。

function slideUpContent(object, callback) {
    if (cssTransitions) {
         object.css("height",0);
         // Perform callback if set
         if ($.isFunction(callback)) {
             callback();
         }
    } else {
        $("#content_box").animate({
            height:0
        }, 600, callback);
    }
}