等到jQuery动画的回调完成后再执行

I have a function that needs to call some functions sequentially. First, a fadeOut is called on a DOM node. In a callback, the DOM node is detached. This is function #1. But, after that is done, I need to call function #2.

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

So:

所以：

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

The above outputs:

以上输出：

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

I need the callback to finish before func2() is called. How do I do it?

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

Working example here: http://jsfiddle.net/y2vj8/2/

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

[EDIT]:

[编辑]：

OK, it seems necessary to give you some explanation of why I want func2() called after the callback is finished, else I don't foresee getting an answer soon :(.

好的，似乎有必要给你一些解释为什么我想要在回调完成后调用func2（），否则我不会很快得到答案:(。

func1 fades a div (call it div1) out and then detaches is from the DOM. This is a publicly available function.

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

func2 is a user-defined callback to a certain event (a click on some other div, say, div2). It may be undefined, but it may contain absolutely any code.

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

When div2 is clicked, func1() is called, then func2() is evaluated, and if it is a function, it is also called.

单击div2时，将调用func1（），然后计算func2（），如果它是函数，则也会调用它。

If the user calls func1() manually, func2() is never called.

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

func1 is unaware of the click event on div2 and therefore cannot check whether func2 should be called or not.

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

3 个解决方案

#1

You could do something really silly like this (jsFiddle):

你可以做一些非常愚蠢的事（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);

Honestly, I'd probably look at restructuring your app. I don't understand why you're doing it the way you're doing it.

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

#2

Since callback is called out of the normal flow (i mean based on when some other action finishes), you need to hook the func2 in that alternate flow..

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

one way would be to to call func2 from inside callback, and if that is not possible for some reason, you can call it from inside func1 like this

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

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

---

The direct answer to

直接回答

I need the callback to finish before func2() is called. How do I do it?

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

is

是

You must call callback before calling func2 ..

你必须在调用func2之前调用callback ..

#3

You could create a wrapped version of the fadeOut method that triggers a custom event:

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

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

Which you can register to handle:

您可以注册处理：

elt.bind("fadeOut", func2);

It's still not clear to me why you can't simply modify the original callback, but this accomplishes the goal of running func2 only once the first callback has completed.

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

See a demo here (click on the div to initiate the fade):

在这里查看演示（单击div以启动淡入淡出）：

• http://jsfiddle.net/sKhuT/
• http://jsfiddle.net/sKhuT/