前一个完成后执行 JavaScript 函数答案

【问题标题】：Excecute JavaScript function after previous one completes前一个完成后执行 JavaScript 函数
【发布时间】：2015-06-06 00:23:37
【问题描述】：

我想按特定顺序（如下所示）执行几个 JavaScript 函数，直到前一个函数完成。我已经尝试了很多方法。有什么建议么？非常感谢任何帮助，我已经坚持了这么久。提前致谢！

function savedSearch(e){
       applySearch1("ColumnA");
       applySearch2("ColumnB");
       applySearch3("ColumnC");
       applySearch4("ColumnD");
       applySearch5("ColumnE");
       applySearch6("ColumnF");
}

【问题讨论】：

都是applySearch1,applySearch2....不同的功能吗？还是为了清楚起见，您是否以不同的方式写了名称？另外，要发送到函数常量的项吗？
欺骗stackoverflow.com/questions/30645765/…
...您正在准确描述发生的情况。某些特定的东西对您来说不能正常工作吗？

标签： javascript jquery asynchronous synchronous jquery-callback

【解决方案1】：

要添加以响应 Mohkhan 的其他答案，您还可以使用 async 库。

https://github.com/caolan/async

这将使您远离callback hell，并使函数列表更易于阅读。

【讨论】：

【解决方案2】：

您应该在所有 applySearch* 函数中使用回调。像这样。

function savedSearch(e){
   applySearch1("ColumnA", function(){
       applySearch2("ColumnB", function(){
           applySearch3("ColumnC", function(){
               applySearch4("ColumnD", function(){
                   applySearch5("ColumnE",function(){
                       applySearch6("ColumnF", function(){
                           // You are done
                       });
                   });
               });
           });
       });
   });
}

【讨论】：

【解决方案3】：

如果使用 jquery，它具有延迟对象，可以帮助您处理异步函数。

这是一个例子：

// Code goes here
$(document).ready(function() {
  function Pipe() {

    this.asyncTasks = [];
    this.observers = {};

    this.on = function(eventName, fn) {
      if (!this.observers[eventName]) {
        this.observers[eventName] = $.Callbacks;
      }
      this.observers[eventName].add(fn);
    }

    this.fire = function(eventName, data) {
      if (this.observers[eventName]) {
        this.observers[eventName].fire(data);
      }
    }

    this.register = function(asyncFn, context) {
      this.asyncTasks.push(new Task(asyncFn, context));
    }

    this.start = function() {
      this.fire('start');
      this._next();
    }

    this._next = function() {
      var task = this.asyncTasks.shift();
      if (task) {
        task.execute().then($.proxy(this._next, this));
      } else {
        this.fire('end');
      }
    }

    var Task = function(fn, context) {
      this.fn = fn;
      this.context = context;
      this.execute = function() {
        if (!this.fn) {
          throw new Exception("Failed to execute.");
        }
        var promise = this.fn.call(context);
        this.fn = null;
        return promise;
      }
    }
  }

  var bookMoview = function() {
    var dfd = jQuery.Deferred();

    // Resolve after a random interval
    setTimeout(function() {
      dfd.resolve("The movie is booked");
      console.log("The movie is booked");
    }, Math.floor(400 + Math.random() * 2000));

    // Return the Promise so caller can't change the Deferred
    return dfd.promise();
  }

  var bookTaxi = function() {
    var dfd = jQuery.Deferred();

    // Resolve after a random interval
    setTimeout(function() {
      console.log("Taxi is booked");
      dfd.resolve("Taxi is booked");
    }, Math.floor(400 + Math.random() * 2000));

    // Return the Promise so caller can't change the Deferred
    return dfd.promise();
  }

  var pipe = new Pipe();
  pipe.register(bookMoview);
  pipe.register(bookTaxi);
  pipe.start();

});

【讨论】：