jQuery .ready()和<script defer>之间的交互

Question

我试图找出我继承的一些代码的问题.

我有一个HTML页面

<script type="text/javascript" src="file1.js" defer="defer"></script>
<script type="text/javascript" src="file2.js" defer="defer"></script>
</body>
</html>

file1.js有

FOO = {
  init : function () {
    var bar = BAR;
  }
}

$(document).ready(FOO.init);

file2.js有

var BAR = {
}

由于元素的延迟属性,是否可以安全地假设当那个可能仍然未定义的.ready()调用b/c 由于延迟执行而导致代码尚未执行？FOO.init()BARfile2.js

这将匹配我试图追踪的错误(仅在IE中偶尔发生),但我真的想在我处理解决方案之前理解为什么会发生这种情况.我不知道为什么原来的开发人员使用defer,除了一个神秘的称赞"他必须"这样做.

Answer 1

Defer 应该导致脚本被添加到页面完全加载后处理的队列中。根据规范，延迟脚本应按照它们进入页面的顺序添加到队列中。

然而，不同的浏览器对顺序的处理略有不同。IE 似乎按照延迟脚本完成加载的顺序运行，而不是按照它们在页面上出现的顺序运行。因此，您偶尔会看到错误，因为有时会按正确的顺序加载它们，有时则不然。

请参阅hacks.mozilla.com 上的这篇文章，了解不同浏览器如何处理延迟队列排序的更详尽的解释和示例。