javascript - Coffeescript/Javascript 方法调用的执行顺序

Question

关于如何让下面的程序结构以我想要的方式工作，我有一个小问题。

我想让它执行，以便控制台以正确的顺序打印出数字。当前运行时，它将运行，以便以导致控制台注销 1 3 2 而不是 1 2 3 的方式运行该方法。

我猜测这只是对 javascript 如何处理函数调用的误解所致。

咖啡:

class exports.Class
    constructor: (@options) ->
    onEdit: =>
        @secondFunction()
        console.log "3"

    secondFunction: =>
        console.log "1"
        @externalClass.getData( (callback) =>
            console.log "2"
        ) 

JS:

var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

exports.Class = (function() {

  function Class(options) {
    this.options = options;
    this.secondFunction = __bind(this.secondFunction, this);

    this.onEdit = __bind(this.onEdit, this);

  }

  Class.prototype.onEdit = function() {
    this.secondFunction();
    return console.log("3");
  };

  Class.prototype.secondFunction = function() {
    var _this = this;
    console.log("1");
    return this.externalClass.getData(function(callback) {
      return console.log("2");
    });
  };

  return Class;

})();

Answer 1

发生的事情是，当您调用 onEdit() 时，它会立即(同步)调用 secondFunction()。同步调用的 secondFunction 将立即打印“1”并调用以获取数据。您的回调将在稍后调用。您可以想象它已被放入队列中等待执行。同时secondFunction结束，返回onEdit执行，最后一行输出“3”。

您无法控制何时显示“2”。它可以是一毫秒后或 30 秒后。

有像https://github.com/caolan/async这样的库可以帮助您在异步环境中编排工作流程。您还应该看看 Async JavaScript 这本书 http://www.amazon.com/Async-JavaScript-ebook/dp/B007N81FE2了解如何在这种环境中工作。

您可以像这样重写您的代码并获得预期的效果，但这在您的实际代码中可能不那么容易，但这是一个想法:

class exports.Class
    constructor: (@options) ->
    onEdit: =>
        @secondFunction()

    secondFunction: =>
        console.log "1"
        @externalClass.getData( (callback) =>
            console.log "2"
            @lastStep()
        ) 

    lastStep: =>
        console.log "3"