Question

I have a little question as to how to get the below program structure to work in the way that I am intending.

I want it to execute so that the console will print out the numbers in the correct order. Currently when run, it will run so that that methods are run in such a way to result in the console logging out 1 3 2 instead of 1 2 3.

I am guessing that this is just down to a misunderstanding of how javascript handles function calls.

Coffee:

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

What’s happening is that when you call onEdit() it immediately (and synchronously) calls secondFunction(). secondFunction given that was called synchronously will print “1” immediately and make the call to get data. Your callback won’t be called until a later time. You can imagine that it has been put on a queue for execution. Meanwhile, secondFunction will end, return execution to onEdit and the last line will output “3”.

You have no control on when the “2” will be displayed. It can be a millisecond later or 30 seconds later.

There are libraries like https://github.com/caolan/async that can help you orchestrate workflows in an asynchronous environment. You should also take a look at the book Async JavaScript http://www.amazon.com/Async-JavaScript-ebook/dp/B007N81FE2 to get a good idea of how to work on this kind of environment.

You could rewrite your code like this and get the desired effect but this might not be as easy on your real code but it’s an idea:

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

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

    lastStep: =>
        console.log "3"