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"

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

1 个答案: