通过具有异步属性的 HTML5 脚本标记的 Javascript 执行顺序答案

【问题标题】：Javascript execution order via HTML5 script tag with async attribute通过具有异步属性的 HTML5 脚本标记的 Javascript 执行顺序
【发布时间】：2013-03-06 09:43:14
【问题描述】：

阿罗哈。我一直在编写一个脚本，虽然我了解问题的每个组成部分的文档（并且查看了关于 SO 的许多其他问题），但我在实践中不了解这种特定行为。请注意，以下代码是隔离特定问题的缩写子集。这里是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>

这里是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);

问题是如果没有<script> 标记中的async 属性，此代码无法将<li> 元素正确存储到menuCategory 中，就好像它在加载DOM 之前运行一样（即使我认为它应该在整个window“对象”加载后触发）。我觉得这很奇怪，因为我使用addEventListener() 仅在整个加载后才尝试运行它（并且它似乎在 Chromium、FF 和 Opera 中的适当时间运行——至少看起来是“适当的时间”）。如果有的话，我认为相反的情况会导致这种行为。

有人能解释一下吗，最好用老爱因斯坦“像你向六岁的孩子解释一样解释”？我显然在阅读中遗漏了一些东西。谢谢！

【问题讨论】：

请注意_site.load() 会立即调用_site.load 并将结果传递给window.onload。那是你要的吗？传递稍后调用的函数引用更为常见：window.addEventListener('load',_site.load,false);（注意缺少括号）。
这显然不是我们想要的。我正要写这个作为答案......
是的，这正是问题所在。你能把这个写下来让我接受它作为答案吗？

标签： javascript html asynchronous

【解决方案1】：

正如 RobG 在 cmets 中提到的，这里的问题是使用 _site.load()（在调用后带有括号）导致函数被执行，然后分配给 onload 事件。将此行为纠正为所需功能的方法是在不带括号的情况下调用它：_site.load（或_site().load）。

【讨论】：