JavaScript: When does JavaScript evaluate a function, onload, or when a function is called?
When does JavaScript evaluate a function? Page load or when is the function called?
The reason I am asking is because I have the following code:
function scriptLoaded() {
// one of our scripts finished loading, detect which scripts are available:
var jQuery = window.jQuery;
var maps = window.google && google.maps;
if (maps && !requiresGmaps.called) {
requiresGmaps.called = true;
requiresGmaps();
}
if (jQuery && !requiresJQuery.called) {
requiresJQuery.called = true;
requiresJQuery();
}
if (maps && jQuery && !requiresBothJQueryGmaps.called) {
requiresBothJQueryGmaps.called = true;
requiresBothJQueryGmaps();
}
}
// asynch download of script
function addScript(url) {
var script = document.createElement('script');
script.src = url;
// older IE...
script.onreadystatechange=function () {
if (this.readyState == 'complete') scriptLoaded.call(this);
}
script.onload=scriptLoaded;
document.getElementsByTagName('head')[0].appendChild(script);
}
addScript('http://google.com/gmaps.js');
addScript('http://jquery.com/jquery.js');
// define some function dependecies
function requiresJQuery() { // create JQuery objects }
function requiresGmaps() { // create Google Maps object, etc }
function requiresBothJQueryGmaps() { ... }
What I want to do is load my JavaScript asynchronously and start as early as possible to start executing these scripts, but my code has dependencies on when the script was loaded and loaded.
When I try to execute the code above, it seems that my browser is still trying to evaluate the code inside my functions require*
even before those functions have been called. It's right? Or am I not clear what happened to my code?
a source to share
Functions are evaluated when called.
for instance
function test() {
window.foo = 'bar';
}
console.log(window.foo); // => undefined
test();
console.log(window.foo); // => bar
Even if it test
was created before the first console.log
, window.foo
it is not filled until test
it is called.
If your functions requires*
freeze / block, you need to show the code for them (why don't you indicate the source of the problematic ones?)
Edit
Your site is currently disconnected when you pin the loaded <script>
to <head>
.
Either way, a quick fix would be to put the scripts you want at the bottom of the page before </body>
, because only the scripts in <head>
will block the page completely while loading.
There are some elegant ways to lag resources, but to keep it simple ..
<script type="text/javascript" src="http://path/to/jquery.js"></script>
<script type="text/javascript">
requiresJQuery(); // jQuery is available at this point
</script>
</body>
The point is, because it <script>
is placed AFTER the main elements, the DOM elements will be available (and potentially loaded) before the browser starts loading your other libraries.
a source to share