我应该如何调用3个函数才能一个接一个地执行它们？

在Javascript中，有同步和异步函数。

同步函数

Javascript中的大多数函数都是同步的。如果要在一行中调用多个同步函数

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

它们将按顺序执行。 在完成之前不会启动。，反过来，在完成之前不会启动。doSomethingElsedoSomethingdoSomethingUsefulThisTimedoSomethingElse

异步函数

但是，异步函数不会相互等待。让我们看一下上面相同的代码示例，这次假设函数是异步的

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

这些函数将按顺序初始化，但它们将大致同时执行。您无法始终如一地预测哪一个将首先完成：恰好需要最短时间来执行的那个将首先完成。

但有时，您希望异步函数按顺序执行，有时您希望同步函数异步执行。幸运的是，这可以通过分别的回调和超时来实现。

回调

假设我们有三个异步函数，我们要按顺序执行、、 和 。some_3secs_functionsome_5secs_functionsome_8secs_function

由于函数可以在 Javascript 中作为参数传递，因此您可以将函数作为回调传递，以便在函数完成后执行。

如果我们创建这样的函数

function some_3secs_function(value, callback){
  //do stuff
  callback();
}

然后你可以按顺序调用，就像这样：

some_3secs_function(some_value, function() {
  some_5secs_function(other_value, function() {
    some_8secs_function(third_value, function() {
      //All three functions have completed, in order.
    });
  });
});

超时

在Javascript中，您可以告诉函数在特定超时（以毫秒为单位）后执行。实际上，这可以使同步函数以异步方式运行。

如果我们有三个同步函数，我们可以使用该函数异步执行它们。setTimeout

setTimeout(doSomething, 10);
setTimeout(doSomethingElse, 10);
setTimeout(doSomethingUsefulThisTime, 10);

然而，这有点丑陋，违反了DRY原则^[wikipedia]。我们可以通过创建一个接受函数数组和超时的函数来稍微清理一下。

function executeAsynchronously(functions, timeout) {
  for(var i = 0; i < functions.length; i++) {
    setTimeout(functions[i], timeout);
  }
}

这可以这样称呼：

executeAsynchronously(
    [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);

总之，如果您有要同步执行的异步函数，请使用回调，如果您有要异步执行的同步函数，请使用超时。

这个答案使用承诺，这是标准的JavaScript功能。如果你的目标平台不支持，用PromiseJs填充它。ECMAScript 6promises

看看我在这里的答案 等到一个带有动画的函数完成，直到运行另一个函数，如果你想使用动画。jQuery

下面是使用 和 的代码的外观。ES6 PromisesjQuery animations

Promise.resolve($('#art1').animate({ 'width': '1000px' }, 1000).promise()).then(function(){
    return Promise.resolve($('#art2').animate({ 'width': '1000px' }, 1000).promise());
}).then(function(){
    return Promise.resolve($('#art3').animate({ 'width': '1000px' }, 1000).promise());
});

普通方法也可以包装在 .Promises

new Promise(function(fulfill, reject){
    //do something for 5 seconds
    fulfill(result);
}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 5 seconds
        fulfill(result);
    });
}).then(function(result){
    return new Promise(function(fulfill, reject){
        //do something for 8 seconds
        fulfill(result);
    });
}).then(function(result){
    //do something with the result
});

该方法在完成后立即执行。通常，作为结果，传递给的返回值将传递给下一个。thenPromisefunctionthen

但是，如果返回 a，则下一个函数将等到执行完成并接收其结果（传递给 的值）。PromisethenPromisefulfill