Load order of included Javascript scripts

Question

My JS/HTML app is loading some controllers which I have set up as included object literals:

e.g.: page1Controller.js

var page1 = {
  initialize() {
    $(".page").removeClass('on');
    $("#page1").addClass('on');
  },
  doThis: function() {
    // script here
  },
  doThat: function() {
    // Script here
  }
}

e.g.: navigation.js

var navigation = {
  bindEvents: function() {
    var page1Button = document.getElementById('page1Button');
    page1Button.addEventListener('click', this.loadPage1, false);
  },
  loadPage1: function() {
    page1.initialize();
  },
  loadPage2: function() {
    page2.initialize();
  }
}

note: navigation.js.bindEvents() gets run after pageLoad/deviceLoad event (it's a phonegap app).

and the scripts are included at the bottom of my HTML page as:

<script src="page1Controller.js"></script>
<script src="page2Controller.js"></script>
<script src="page3Controller.js"></script>
<script src="page4Controller.js"></script>
<script src="navigation.js"></script>

It is my understanding that as a default, the scripts will be loaded synchronously - one after the other in the order they appear in the HTML page.

However, when I call say page3.doThat() from navigation.js, the doThat function is undefined, although functions within some of the other controllers work fine. Is it the case that, even though the scripts are loaded in order, navigation.js might be loaded up before page3Controller.js has 'registered' it's functions fully?

"It is my understanding that as a default, the scripts will be loaded synchronously - one after the other in the order they appear in the HTML page." That's correct. With the markup and code in your question, there is no way code in navigation.js could fail to see a filled-in page1 object assuming that's at the top level of page1Controller.js. — T.J. Crowder
– T.J. Crowder, Commented Sep 20, 2016 at 13:06
Perhaps your code in page1Controller.js and such isn't at the top level? Perhaps it's only run in response to an event, like onDOMContentReady? — T.J. Crowder
– T.J. Crowder, Commented Sep 20, 2016 at 13:06
maybe, you should use window.onload or document.onload or you can use setTimeout with check function. — ZigZag
– ZigZag, Commented Sep 20, 2016 at 13:07
@T.J.Crowder The code is definitely at the top level. page1Controller.js is only ever invoked from a function within navigation.js. In the real code, an initialize() function hides all 'pages' (Divs in an SPA) in the DOM and makes it's own pertinent div visible. So navigation.js would call page1.initialize() for instance. In the top level of navigation.js I can log page1.initialize to the console and I can log it directly from a browser console. — Wittner
– Wittner, Commented Sep 20, 2016 at 14:30

Wittner · Accepted Answer · 2016-09-24 13:24:32Z

1

The answer is that in the case of scripts loaded in order in a set of HTML script tags, each script is loaded in its entirety into memory, before the following script, making functions in earlier scripts accessible to ones called later. Thanks to @T.J. Crowder in his comments for pointing this out.

answered Sep 24, 2016 at 13:24

Wittner

5935 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load order of included Javascript scripts

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related