JavaScript 顺序异步函数调用

Question

I have an array of functions, which making some logic asynchronously (eg ajax calls). How does look like function, which will sequentially call functions from array?

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

Answer 1

Write a function which calls you async function and takes the array index as an argument.

In the callback for the async function, increment the index and (if you haven't got to the end of the array) call the function recursively with the new index.

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