Question

我有一个需要按顺序调用某些函数的函数。首先，在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上的click事件，因此无法检查是否应该调用func2。

Answer 1

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

一种方法是从func2内部调用callback，如果由于某种原因无法调用，则可以从func1内部调用

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

直接回答

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

是

在致电callback之前，您必须致电func2。

Answer 2

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

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

Answer 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/

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

3 个答案: