Question

I got this code block:

(function($, exports) {
    var mod = function(includes) {
        if (includes) this.include(includes);
    };
    mod.fn = mod.prototype;
    mod.fn.proxy = function(func) {
        return $.proxy(func, this);
    };
    mod.fn.load = function(func) {
        $(this.proxy(func));
    };
    mod.fn.include = function(ob) {
        $.extend(this, ob);
    };
    exports.Controller = mod;

})(jQuery, window);

(function($, Controller) {
    mod = new Controller;
    mod.toggleClass = function(e) {
        this.view.toggleClass("over", e.data);
    };
    mod.load(function() {
        this.test = 'test';
        console.log(this.test); // Delayed
        this.view = $("#view");
    });

    console.log(mod.view) // returns undefined
    console.log(mod);

})(jQuery, Controller);

when executing on firefox, the result on firebug console panel is as follows:

undefined
Object { toggleClass=function(), proxy=function(), load=function(), more...}
test

That means the last two log functions (they’re placed at the bottom of the code block) was executed before the first one (which is : console.log(this.test); // Delayed)

Could you explain why the flow happened in this way?

Answer 1

Could you explain why the flow happened in this way?

Because you set up the code in the function you passed into load to wait until DOM ready, by (inside your load function) passing a function reference into the jQuery $ function. When you pass it a function reference, that’s a shortcut for $(document).ready(...). DOM ready doesn’t happen until after your other code runs, so you don’t see the output from the contents of the function you’re passing into load until after your other outputs.