1

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

我希望它执行，以便控制台以正确的顺序打印出数字。当前运行时，它将运行这些方法以导致控制台注销 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;

})();
4

1 回答 1

2

发生的情况是，当您调用 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"
于 2012-12-10T15:58:47.507 回答