当你在同一个HTML页面上使用两个JavaScript文件中有两个jQuery $(document).ready调用时会发生什么？

Question

我有一个关于jQuery的问题 $(document).ready

假设我们有一个包含2个JavaScript文件的HTML页面

<script language="javascript" src="script1.js" ></script>
<script language="javascript" src="script2.js" ></script>

现在让我们在这两个脚本文件中说,我们$(document)如下

在script1.js里面:

$(document).ready(function(){
    globalVar = 1;
})

在script2.js里面:

$(document).ready(function(){
    globalVar = 2;
})

现在我的问题是:

1. 这两个就绪事件函数都会被触发吗？
2. 如果是,那么它们被解雇的顺序是什么,因为文件将同时为两者准备好？
3. 这种方法是推荐还是我们理想情况下应该只有1 $(文件).ready？
4. 所有浏览器(IE,FF等)的执行顺序是否相同？

谢谢.

Answer 1

1. 这两个就绪事件函数都会被触发吗？

是的,他们都会被解雇.

2. 他们被解雇的顺序是什么,因为文件将同时为他们两个准备好？

以它们出现的方式(从上到下),因为ready事件将被触发一次,并且所有事件侦听器将一个接一个地得到通知.

3. 这种方法是推荐还是我们理想情况下应该只有1 $(文件).ready？

可以这样做.如果你可以在同一个区块代码中使用它们,那么管理起来会更容易,但这就是它的全部内容.更新:显然我忘了提及,如果你在多个文件中执行此操作,则会增加JavaScript代码的大小.

4. 所有浏览器(IE,FF等)的执行顺序是否相同？

是的,因为jQuery采用了跨浏览器规范化.

Answer 2

看到这里:jQuery - 有多个$(document).ready(function(){})是不好的; 和这里:教程:多个$(文档).ready()

1. 是
2. 附加顺序.jQuery在内部维护一个readyListwith Deferred对象.
3. 这部分是品味问题.有一个就绪处理程序将为您提供所有正在发生的事情的一个很好的概述,而多个(即每个包含的文件一个)将使您的代码更加模块化(即,您可以包含或删除.js文件,并确保它提供和绑定自己的就绪处理程序).
4. 是的 - 附加顺序.