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

Question

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

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

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

现在假设在这两个脚本文件中，我们都有 < code>$(document) 如下

script1.js 内部：

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

script2.js 内部：

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

现在我的问题是：

1. 这两个就绪事件函数都会被触发吗？
2. 如果是，他们被解雇的顺序是什么？ 文件将同时准备好 他们俩都有时间吗？
3. 是否推荐使用这种方法，或者我们理想情况下应该只有 1 个 $(文档).准备好了吗？
4. 所有浏览器（IE、FF 等）的执行顺序是否相同？

谢谢。

Answer 1

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

是的，他们都会被解雇。

由于文件将同时为他们两人准备好，因此他们被解雇的顺序是什么？

它们出现的方式（从上到下）是因为就绪事件将被触发一次，并且所有事件侦听器将相继收到通知。

是否建议采用这种方法，或者理想情况下我们应该只有 1 $(document).ready ？

这样做就可以了。如果可以将它们放在同一个块代码中，管理起来会更容易，但仅此而已。 更新：显然我忘了提及，如果您在多个文件中执行此操作，则会增加 JavaScript 代码的大小。

所有浏览器（IE、FF 等）的执行顺序是否相同？

是的，因为 jQuery 实现了跨浏览器标准化。

Answer 2

请参阅此处： jQuery - 拥有多个 $(document ).ready(function() {}); 和此处： 教程：多个 $(document).ready()

1. 是附加顺序
2. 。 jQuery 内部 维护一个带有 readyList ="http://api.jquery.com/category/deferred-object/" rel="nofollow noreferrer">延迟对象。
3. 这部分是一个品味问题。拥有一个就绪处理程序将使您对正在发生的所有事情有一个很好的概述，而多个（即每个包含的文件一个）将使您的代码更加模块化（即，您可以包含或删除 .js 文件，并确保它提供并绑定自己的就绪处理程序）。
4. 是的 - 附加顺序。

Answer 3

在任何当前浏览器中，您可以指望两个处理程序都按照脚本包含的顺序执行，并且在第二个脚本引用之后 globalVar 为 2。

Answer 4

如果您想要完全控制，我强烈建议仅一个 $(document).ready();

如果您通过 ajax 加载 HTML 的部分部分，并且 ajax 响应包含 $(document).ready(); 脚本，并且您想要触发 $(document).ready();来自 ajax 回调中的 script1.js、script2.js 等。您必须复制大量代码...

祝您好运！

/ $(窗口).ready(); ;)

Answer 5

1. 两者都会被解雇
2. 。一旦尘埃落定，变量的值将为 2。
3. 不建议的主要事情是使用 2 个不同的 JS 文件，正如 Google PageSpeed 和 Yahoo YSlow 所建议的那样，最好将所有 Javascript 代码放在同一个文件中。
   就相同的事件处理程序而言，老实说，我认为没有理由这样做，而且这只会让您的代码可读性更差。
4. 对此我没有答案。