jquery，如何在另一个函数结束后立即运行一个函数

*注意：重写问题：

我正在尝试写以下内容outside各个函数调用的数量：

example:

function f1(){
    do something 1
}
function f2(){
    do something 2   
}

run function 1
when done
run function 2
  

（请参阅下面的 jsfiddles 评论）

问题是，箱子同时加载。行为应该是，加载红色，完成后加载绿色。

如果这不是 jQuery 中的常用方法，请告诉我，也许我只是在追鬼......

取决于功能。

简短回答：

For 同步功能：只需依次调用它们即可。

For 异步功能：取决于是什么使它异步。

jQuery 动画？从动画的方法或 fx 队列的 Promise 对象定义回调参数。

setTimeout/setInterval/其他什么？最有可能的是，这些函数需要重写以提供回调或 Deferred/Promise 对象。

See this or this举些例子。

长答案：

根据您评论中的 jsFiddles，您有以下两个功能：

function firstFunction(){
    $(".one").fadeIn(1000).delay(2000).fadeOut();
}
function secondFunction(){
    $(".two").fadeIn(1000).delay(2000).fadeOut();
}

你要secondFunction追赶firstFunction，并且您不希望篡改这些功能。如果是这样的话，我能想到的只有一个解决方案：承诺对象从元素firstFunction是动画，然后定义secondFunction作为成功处理程序：

firstFunction();
$('.one').promise().then(secondFunction);

jsFiddle

promise()返回绑定到该元素当前动画状态的 Promise 对象。$('.one').promise().then(secondFunction)本质上是在说“我保证跑步secondFunction当当前动画为.one已经完成了。

如果你愿意篡改现有的功能，你也可以调用secondFunction作为回调参数fadeOut within firstFunction，但这不是一个非常优雅的解决方案。

如果您愿意重写您的函数，理想的解决方案是使用 Deferreds 和 Promises 来驯服您的异步函数。这是一个快速入门：

• 在 jQuery 中，一个Deferredobject 是一个特殊的对象，可用于定义函数的成功/失败状态。您可以在函数中使用它。
• A Promiseobject 是一个特殊的对象，您可以使用它向这些成功/失败状态添加回调。您可以在功能之外使用它。

使用这些工具，您可以重写函数以指定它们何时“完成”，并且可以使函数外部的代码能够知道它们何时完成（并在完成后执行）。

使用 Deferred 和 Promise 重写，代码如下所示：

function firstFunction(){
    var deferred = $.Deferred();
    $(".one").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}
function secondFunction(){
    var deferred = $.Deferred();
    $(".two").fadeIn(1000).delay(2000).fadeOut(function() {
        deferred.resolve();
    });
    return deferred.promise();
}

firstFunction().then(secondFunction);

jsFiddle

如果您的所有函数都是这样编写的，您可以控制它们的执行顺序并让它们按顺序运行then()。这是一个更彻底的示例：

function one(){
    var deferred = $.Deferred();
    $(".one").fadeOut(500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function two(){
    var deferred = $.Deferred();
    $(".two").fadeOut(1500, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function three(){
    var deferred = $.Deferred();
    $(".three").fadeOut(1000, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function four(){
    var deferred = $.Deferred();
    $(".four").fadeOut(750, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

function five(){
    var deferred = $.Deferred();
    $(".five").fadeOut(600, function() {
        $(this).appendTo('body').fadeIn(500, function() { deferred.resolve(); });
    });
    return deferred.promise();
}

one()
    .then(two)
    .then(three)
    .then(four)
    .then(five);

jsFiddle