等到jQuery动画的回调完成执行答案

【问题标题】：wait until jQuery animation's callback is done executing等到jQuery动画的回调完成执行
【发布时间】：2011-12-12 01:48:55
【问题描述】：

我有一个函数需要按顺序调用一些函数。首先，在 DOM 节点上调用 fadeOut。在回调中，DOM 节点被分离。这是功能#1。但是，完成之后，我需要调用函数#2。

所以：

var func1 = function() {
    console.log('func 1 start');
    elt.fadeOut(2000, callback);
    console.log('func 1 end');
};
var func2 = function() {
    console.log('func 2 start');
    console.log('func 2 end');
};
var callback = function() {
    console.log('func 1 callback start');
    elt.detach();
    console.log('func 1 callback end');
};
func1();
func2();

以上输出：

func 1 start
func 1 end
func 2 start
func 2 end
func 1 callback start
func 1 callback end

我需要在调用func2() 之前完成回调。我该怎么做？

这里的工作示例：http://jsfiddle.net/y2vj8/2/

[编辑]：

好的，似乎有必要解释一下为什么我希望在回调完成后调用func2()，否则我预计不会很快得到答案:(。

func1 淡出一个 div（称为 div1）然后从 DOM 中分离出来。这是一个公开的功能。

func2 是对某个事件的用户定义回调（点击其他 div，例如 div2）。它可能是未定义的，但它绝对可以包含任何代码。

当div2被点击时，func1()被调用，然后func2()被求值，如果是函数，也被调用。

如果用户手动调用func1()，则永远不会调用func2()。

func1 不知道 div2 上的点击事件，因此无法检查是否应该调用 func2。

【问题讨论】：

为什么不在回调结束时夹住func2()？
相信我，如果我能做到，我什至不会发布这个问题。
你可以使用 setInterval 并每次检查回调是否完成，但我不太喜欢这个想法
那么你想要func 1 start, func 1 end, func1 callback start, func1 callback end and then fun2 start func2 end而不在func1 callback中调用func2？
没错。我希望整个 func1 以及动画的回调在我继续调用任何其他函数（此处为 func2）之前完成。

标签： javascript jquery animation callback

【解决方案1】：

你可以做这样的傻事（jsFiddle）：

var func1 = function(callback) {
    console.log('func 1 start');
    $('#fadeOut').fadeOut(2000, function() { func1_callback(callback) });
    console.log('func 1 end');

};
var func2 = function() {
    console.log('func 2 start');
    console.log('func 2 end');
};
var func1_callback = function(callback) {
    console.log('func 1 callback start');
    $('#fadeOut').detach();
    console.log('func 1 callback end');
    callback.call();
};
func1(func2);

老实说，我可能会考虑重组您的应用。我不明白你为什么要这样做。

【讨论】：

$('#fadeOut').fadeOut(2000, func1_callback(callback)); 不注册回调，它立即执行 func1_callback。
看到其他答案（出于某种原因）不适合提问者，这就是我摆弄的想法。哈哈尔:D 也许，更好的是，您可以在包装函数中按顺序调用原始callback 和参数callback。这样，您也不必修改原来的 callback 函数。
是的，你绝对可以做到。我是这样做的，以防回调也有某种动画/延迟，但它没有，所以我不知道我为什么这样做：p
我按照自己的方式做事是有原因的。不过，您的建议可能是实现我想要的最干净的方法。

【解决方案2】：

由于回调是在正常流程之外调用的（我的意思是基于其他操作何时完成），您需要在该备用流程中挂钩 func2..

一种方法是从callback 内部调用func2，如果由于某种原因不能这样做，您可以像这样从func1 内部调用它

var func1 = function() {
    console.log('func 1 start');
    elt.fadeOut(2000, function(){ callback(); func2(); });
    console.log('func 1 end');
};

直接回答

我需要在调用 func2() 之前完成回调。我该怎么做？

是

您必须先致电callback，然后再致电func2 ..

【讨论】：

【解决方案3】：

您可以创建触发自定义事件的 fadeOut 方法的包装版本：

var _oldfade = $.fn.fadeOut;
$.fn.fadeOut = function(duration, callback) {  
    var el = $(this);
    return _oldfade.call(this, duration, function() {
        callback();
        el.trigger('fadeOut')
    });
}

您可以注册处理的：

elt.bind("fadeOut", func2);

我仍然不清楚为什么不能简单地修改原始回调，但这实现了仅在第一个回调完成后运行 func2 的目标。

在此处查看演示（单击div 启动淡入淡出）：

http://jsfiddle.net/sKhuT/

【讨论】：