jQuery - 多个$（文档）.ready ...？

本文翻译自：jQuery - multiple $(document).ready …?

Question: 题：

If I link in two JavaScript files, both with $(document).ready functions, what happens? 如果我链接两个JavaScript文件，都带有$(document).ready函数，会发生什么？ Does one overwrite the other? 有人会覆盖另一个吗？ Or do both $(document).ready get called? 或者两个$(document).ready被调用？

For example, 例如，

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js : jquery1.js：

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js: jquery2.js：

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});

I'm sure it is best practice to simply combine both calls into a single $(document).ready but it's not quite possible in my situation. 我确信最好将两个调用组合成一个$(document).ready但是在我的情况下它不太可能。

---

#1楼

参考：https://stackoom.com/question/M5FJ/jQuery-多个-文档-ready

---

#2楼

It is important to note that each jQuery() call must actually return. 重要的是要注意每个jQuery()调用必须实际返回。 If an exception is thrown in one, subsequent (unrelated) calls will never be executed. 如果在一个异常中抛出异常，则永远不会执行后续（不相关）调用。

This applies regardless of syntax. 无论语法如何，这都适用。 You can use jQuery() , jQuery(function() {}) , $(document).ready() , whatever you like, the behavior is the same. 您可以使用jQuery() ， jQuery(function() {}) ， $(document).ready() ，无论您喜欢什么，行为都是一样的。 If an early one fails, subsequent blocks will never be run. 如果早期的一个失败，后续的块将永远不会运行。

This was a problem for me when using 3rd-party libraries. 使用第三方库时，这对我来说是一个问题。 One library was throwing an exception, and subsequent libraries never initialized anything. 一个库抛出异常，后续的库从未初始化任何东西。

---

#3楼

Not to necro a thread, but under the latest version of jQuery the suggested syntax is: 不是坏死线程，但在最新版本的jQuery ，建议的语法是：

$( handler )

Using an anonymous function, this would look like 使用匿名函数，这看起来像

$(function() { ... insert code here ... });

See this link: 看到这个链接：

https://api.jquery.com/ready/ https://api.jquery.com/ready/

---

#4楼

Execution is top-down. 执行是自上而下的。 First come, first served. 先到先得。

If execution sequence is important, combine them. 如果执行顺序很重要，请将它们合并。

---

#5楼

All will get executed and On first Called first run basis!! 一切都将被执行，并在第一次调用第一次运行的基础上!!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Demo As you can see they do not replace each other 演示如您所见，它们不会相互替换

Also one thing i would like to mention 还有一件事我想提一下

in place of this 代替这个

$(document).ready(function(){});

you can use this shortcut 你可以使用这个快捷方式

jQuery(function(){
   //dom ready codes
});

---

#6楼

$(document).ready(); $（文件）。就绪（）; is the same as any other function. 与任何其他功能相同。 it fires once the document is ready - ie loaded. 一旦文件准备好就会触发 - 即装载。 the question is about what happens when multiple $(document).ready()'s are fired not when you fire the same function within multiple $(document).ready()'s 问题是当多个$（document）.ready（）被触发时，当你在多个$（document）.ready（）中触发相同的函数时会发生什么

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

both will behave exactly the same. 两者的行为完全相同。 the only difference is that although the former will achieve the same results. 唯一的区别是，虽然前者会达到同样的效果。 the latter will run a fraction of a second faster and requires less typing. 后者运行速度会快一点点，并且需要更少的打字。 :) :)

in conclusion where ever possible only use 1 $(document).ready(); 总之，只要有可能只使用1 $（文件）.ready（）;

//old answer //老回答

They will both get called in order. 它们都会按顺序被调用。 Best practice would be to combine them. 最佳做法是将它们结合起来。 but dont worry if its not possible. 但不要担心，如果它不可能。 the page will not explode. 页面不会爆炸。