JavaScript 顺序异步函数调用答案

【问题标题】：JavaScript sequential async function callsJavaScript 顺序异步函数调用
【发布时间】：2017-02-07 13:33:29
【问题描述】：

我有一个函数数组，它们可以异步生成一些逻辑（例如 ajax 调用）。函数怎么看，会依次从数组中调用函数？

var saveHandlers = [];

saveHandlers.push(function () {
   var deferred = $.Deferred();

   setTimeout(function() {
      deferred.resolve();
   }, 2000);

   return deferred.promise();
});

saveHandlers.push(function () {
   var deferred = $.Deferred();

   setTimeout(function() {
      deferred.resolve();
   }, 2000);

   return deferred.promise();
});

$(function () {
    var $form = $('#form');

    $form
       .unbind('submit')
       .submit(function (e) {
          if (saveHandlers.length > 0) {
              $.when.apply(null, saveHandlers);
          }
          e.preventDefault();
       });
});

【问题讨论】：

developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
请阅读How to create a Minimal, Complete, and Verifiable example 并向我们展示您的尝试。所以我们可以从那开始讨论你的问题。
@Archer 假设一个数组由 Promises 组成，但它的长度是动态的。主要功能如何？
@Andrea 我添加了一个例子。

标签： javascript ajax asynchronous promise jquery-deferred

【解决方案1】：

编写一个调用异步函数并将数组索引作为参数的函数。

在异步函数的回调中，增加索引并（如果您没有到达数组末尾）使用新索引递归调用该函数。

var foo = [fun_a, fun_b, fun_c];

function bar(index) {
    index = index || 0;

    function callback() {
        if (foo[++index]) {
           bar(index);
        }
    };

    foo[index]().then(callback);
}

【讨论】：