Question

阿罗哈。我一直在编写一个脚本，虽然我理解问题的每个组成部分的文档（并且已经查看了很多关于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);

问题是，如果async标记中没有<script>属性，则此代码无法将<li>元素正确存储到menuCategory中，就好像它先前已在运行加载的DOM（即使我认为它应该在整个window“对象”加载后触发）。我发现这很奇怪，因为我正在使用addEventListener()尝试在整个事件加载后运行它（并且它似乎在Chromium，FF和Opera中的适当时间运行 - 至少出现了什么成为“适当的时间”）。如果有的话，我认为相反会导致这种行为。

有人可以解释这一点，最好使用旧的爱因斯坦“解释它就像你向六岁的孩子解释一样”吗？我的阅读中显然遗漏了一些东西。谢谢！

Answer 1

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

通过带有async属性的HTML5脚本标记执行Javascript执行顺序

1 个答案: