通過具有async屬性的HTML5腳本標簽執行Javascript的順序

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);

問題在於，在<script>標簽中沒有async屬性時，此代碼無法將<li>元素正確存儲到menuCategory ，就好像它在加載DOM之前運行一樣（即使我認為應該在整個window “對象”加載）。我發現這很奇怪，因為我使用addEventListener()嘗試僅在整個內容加載后運行它（並且它似乎在Chromium，FF和Opera中的適當時間運行-至少看起來像是在“適當的時間”）。 如果有的話，我認為相反的情況會導致這種現象。

有人可以解釋這一點，最好使用舊的愛因斯坦“像向六歲的孩子解釋它一樣解釋它”嗎？ 我的閱讀中顯然缺少一些東西。 謝謝！

Answer 1

正如RobG在評論中提到的那樣，這里的問題是使用_site.load() （在調用后帶有括號）會導致函數被執行，然后將其分配給onload事件。 將此行為更正為所需功能的方法是在不帶括號的情況下調用它： _site.load （或_site().load ）。

通過具有async屬性的HTML5腳本標簽執行Javascript的順序

問題描述

1 個解決方案

解決方案1
1 已采納 2013-03-18 08:27:26

通過具有async屬性的HTML5腳本標簽執行Javascript的順序

問題描述

1 個解決方案

解決方案1 1 已采納 2013-03-18 08:27:26

解決方案1
1 已采納 2013-03-18 08:27:26