Javascript execution order via HTML5 script tag with async attribute

Question

Aloha. I have been working on a script and though I understand documentation of each constituent of the problem (and have looked over many other questions on SO), I don't understand this specific behavior in practice. Please be aware that the following code is an abbreviated subset that isolates the specific issue. Here is async.html:

<!doctype html>
<html><head><script type="text/javascript" src="asyncTest.js" async="true"></script></head>
<body><ul id="menu"><li>one</li><li>two</li><li>three</li></ul></body></html>

And here is asyncTest.js:

var _site = function() {
  var load = function() {
    var menuCategory = document.getElementById('menu').getElementsByTagName('li');
    for(var i=0; i<menuCategory.length; i++) { alert(i+'['+menuCategory[i]+']'); }
  };

  return { load:load };
}();
window.addEventListener('load',_site.load(),false);

The problem is that without the async attribute in the <script> tag, this code does not properly store the <li> elements into menuCategory, as though it were running prior to the DOM being loaded (even though I thought it should fire after the entire window "object" loads). I find that strange because I am using the addEventListener() to try and run this only after the whole thing has been loaded (and it appears to run at the appropriate time in Chromium, FF, and Opera -- at least what appears to be the "appropriate time"). If anything, I think that the opposite would cause this behavior.

Can someone explain this, preferably using the old Einstein "explain it like you're explaining it to a six-year-old"? I'm obviously missing something in my reading. Thanks!

Note that _site.load() will call _site.load immediately and pass the result to window.onload. Is that what you want? It's more common to pass a function reference to be called later: window.addEventListener('load',_site.load,false); (note missing parenthesis). — RobG
– RobG, Commented Mar 18, 2013 at 5:40
That's obviously not what is wanted. I was about to write this as answer... — Christophe
– Christophe, Commented Mar 18, 2013 at 5:42
Yes, that's exactly the problem. Can you please write this up so I can accept it as an answer? — L0j1k
– L0j1k, Commented Mar 18, 2013 at 6:00

L0j1k · Accepted Answer · 2013-03-18 08:27:26Z

1

As mentioned by RobG in the comments, the problem here is that using _site.load() (with parenthesis after the call) is causing the function to be executed AND THEN assigned to the onload event. The way to correct this behavior to the desired functionality is to call it without the parenthesis: _site.load (or _site().load).

answered Mar 18, 2013 at 8:27

L0j1k

12.7k7 gold badges58 silver badges65 bronze badges

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

Collectives™ on Stack Overflow

Javascript execution order via HTML5 script tag with async attribute

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related