在 Javascript 中，有同步和异步功能。

同步功能

Javascript 中的大多数函数都是同步的。如果要连续调用多个同步函数

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

他们将按顺序执行。在完成doSomethingElse之前不会开始doSomething。doSomethingUsefulThisTime，反过来，doSomethingElse在完成之前不会启动。

异步函数

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

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

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

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

回调

假设我们有三个要按顺序执行的异步函数some_3secs_function，some_5secs_function， 和some_8secs_function。

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

如果我们创建这样的函数

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

然后你可以按顺序调用 then ，如下所示：

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

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

这个答案使用标准promises的 JavaScript 特性ECMAScript 6。如果您的目标平台不支持promises，请使用PromiseJs对其进行polyfill。

如果您想使用动画，请在此处查看我的答案，等待带有动画的函数完成，直到运行另一个函数jQuery。

这是您的代码与ES6 Promises和 的样子jQuery 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
});

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

但是如果 aPromise被返回，下一个then函数会一直等到Promise执行完成并接收它的结果（传递给 的值fulfill）。

听起来您没有完全理解同步和异步函数执行之间的区别。

您在更新中提供的代码会立即执行您的每个回调函数，然后立即启动动画。然而，动画是异步执行的。它是这样工作的：

1. 在动画中执行一个步骤
2. setTimeout使用包含下一个动画步骤和延迟的函数调用
3. 过了一段时间
4. 给setTimeout执行的回调
5. 返回步骤 1

这一直持续到动画的最后一步完成。同时，您的同步功能早就完成了。换句话说，你的通话animate功能并没有真正需要3秒钟。效果是通过延迟和回调来模拟的。

你需要的是一个队列。在内部，jQuery 对动画进行排队，只有在其相应的动画完成后才执行您的回调。如果您的回调然后启动另一个动画，效果是它们按顺序执行。

在最简单的情况下，这等效于以下内容：

window.setTimeout(function() {
    alert("!");
    // set another timeout once the first completes
    window.setTimeout(function() {
        alert("!!");
    }, 1000);
}, 3000); // longer, but first

这是一个通用的异步循环函数。它将按顺序调用给定的函数，在每个函数之间等待指定的秒数。

function loop() {
    var args = arguments;
    if (args.length <= 0)
        return;
    (function chain(i) {
        if (i >= args.length || typeof args[i] !== 'function')
            return;
        window.setTimeout(function() {
            args[i]();
            chain(i + 1);
        }, 2000);
    })(0);
}    

用法：

loop(
  function() { alert("sam"); }, 
  function() { alert("sue"); });

您显然可以修改它以获取可配置的等待时间或立即执行第一个函数或在链false中apply的函数返回时停止执行或在指定上下文中的函数或您可能需要的任何其他内容。

我相信异步库将为您提供一种非常优雅的方式来做到这一点。虽然Promise和回调可能有点难以处理，但异步可以提供简洁的模式来简化您的思考过程。要串行运行函数，您需要将它们放在异步瀑布中。在异步术语中，每个函数都被称为 a task，它带有一些参数和 a callback；这是序列中的下一个函数。基本结构如下所示：

async.waterfall([
  // A list of functions
  function(callback){
      // Function no. 1 in sequence
      callback(null, arg);
  },
  function(arg, callback){
      // Function no. 2 in sequence
      callback(null);
  }
],    
function(err, results){
   // Optional final callback will get results for all prior functions
});

我只是试图在这里简要解释一下结构。通读瀑布指南以获取更多信息，它写得很好。

你的函数应该接受一个回调函数，当它完成时被调用。

function fone(callback){
...do something...
callback.apply(this,[]);

}

function ftwo(callback){
...do something...
callback.apply(this,[]);
}

那么用法如下：

fone(function(){
  ftwo(function(){
   ..ftwo done...
  })
});