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

What happens when you have two jQuery $(document).ready calls in two JavaScript files used on the same HTML page?

提问by testndtv

I have a question on jQuery $(document).ready

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

Let's say we have a HTML page which includes 2 JavaScriptfiles

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

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

Now let's say in both these script files, we have $(document)as follows

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

Inside script1.js:

在script1.js 中：

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

Inside script2.js:

在script2.js 中：

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

Now my Questionsare:

现在我的问题是：

1. Will both these ready event function get fired ?
2. If yes, what will the order in which they get fired, since the document will be ready at the same time for both of them?
3. Is this approach recommended OR we should ideally have only 1 $(document).ready ?
4. Is the order of execution same across all the browsers (IE,FF,etc)?

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

Thank you.

谢谢你。

采纳答案by Shef

1. Will both these ready event function get fired ?

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

Yes, they will both get fired.

是的，他们都会被解雇。

2. what will the order in which they get fired, since the document will be ready at the same time for both of them?

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

In the way they appear (top to bottom), because the ready event will be fired once, and all the event listeners will get notified one after another.

以它们出现的方式（从上到下），因为 ready 事件将被触发一次，并且所有事件侦听器将一个接一个地收到通知。

3. Is this approach recommended OR we should ideally have only 1 $(document).ready ?

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

It is OK to do it like that. If you can have them in the same block code it would be easier to manage, but that's all there is to it. Update: Apparently I forgot to mention, you will increase the size of your JavaScript code if you do this in multiple files.

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

4. Is the order of execution same across all the browsers (IE,FF,etc)?

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

Yes, because jQuery takes the cross-browser normalization at hand.

是的，因为 jQuery 手头的跨浏览器规范化。

回答by jensgram

See here: jQuery - is it bad to have multiple $(document).ready(function() {});and here: Tutorials:Multiple $(document).ready()

看这里：jQuery - 有多个 $(document).ready(function() {}); 在这里：教程：多个 $(document).ready()

1. Yes
2. Order of attach. jQuery internallymaintains a readyListwith Deferredobjects.
3. It's partially a matter of taste. Having oneready handler will give you a nice overview of all that is happening, while multiple(i.e., one per included file) will make your code much more modular (i.e., you can include or remove a .jsfile and be sure that it provides and binds its own ready handler).
4. Yes - order of attach.

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

回答by Dave Ward

You can count on both handlers being executed in order of their script inclusion and globalVarbeing 2after the second script reference, in any current browser.

你可以指望两个处理器在他们的剧本包容和秩序正在执行globalVar之中2，第二脚本参考后，在任何当前的浏览器。

回答by Kevin Adolfsson

If you want full control I strongly recommend only one$(document).ready();

如果你想要完全控制，我强烈建议只使用一个$(document).ready();

If you load partial portions of HTML through ajaxand the ajax response includes a $(document).ready();-script and you want to fire $(document).ready(); from script1.js, script2.js and so on in the ajax callback.. You have to duplicate PLENTY of code....

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

Good Luck!

祝你好运！

/ $(window).ready(); ;)

/ $(window).ready(); ;)

回答by Itai Sagi

1. Both will get fired
2. The value of the variable will be 2 once all the dust has settled.
3. The main thing which isn't recommended is using 2 different JS files, as Google PageSpeed, and Yahoo YSlow recommends, it's best to have all your Javascript codes in the same file. as far as same event handlers, well, in all honesty, I see no reason why to do that, and it'll only make your code readability lousier.
4. I have no answer for that.

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