Javascript jQuery - 多个 $(document).ready ...？

jQuery - multiple $(document).ready ...?

提问by rlb.usa

Question:

题：

If I link in two JavaScript files, both with $(document).readyfunctions, what happens? Does one overwrite the other? Or do both $(document).readyget called?

如果我链接两个 JavaScript 文件，都带有$(document).ready函数，会发生什么？一个会覆盖另一个吗？或者两者都$(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).readybut it's not quite possible in my situation.

我确信将两个调用简单地合并为一个是最佳实践，$(document).ready但在我的情况下不太可能。

采纳答案by Praveen Prasad

All will get executedand 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>

DemoAs you can see they do not replace each other

Demo如您所见，它们不会相互替换

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
});

回答by cjastram

It is important to note that each jQuery()call must actually return. If an exception is thrown in one, subsequent (unrelated) calls will never be executed.

需要注意的是，每次jQuery()调用都必须实际返回。如果一个异常被抛出，后续的（不相关的）调用将永远不会被执行。

This applies regardless of syntax. You can use jQuery(), jQuery(function() {}), $(document).ready(), whatever you like, the behavior is the same. If an early one fails, subsequent blocks will never be run.

无论语法如何，这都适用。您可以使用jQuery(), jQuery(function() {}), $(document).ready()，无论您喜欢什么，行为都是相同的。如果早期的块失败，则后续块将永远不会运行。

This was a problem for me when using 3rd-party libraries. One library was throwing an exception, and subsequent libraries never initialized anything.

在使用 3rd 方库时，这对我来说是一个问题。一个库抛出异常，后续库从未初始化任何内容。

回答by Ed Fryed

$(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

$(文件).ready(); 与任何其他功能相同。一旦文档准备好 - 即加载，它就会触发。问题是当多个 $(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 $(document).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.

他们都将按顺序被调用。最佳实践是将它们结合起来。但如果不可能，请不要担心。页面不会爆炸。

回答by Diodeus - James MacFarlane

Execution is top-down. First come, first served.

执行是自上而下的。先到先得。

If execution sequence is important, combine them.

如果执行顺序很重要，请将它们组合起来。

回答by Scoobler

Both will get called, first come first served. Take a look here.

两者都会被调用，先到先得。看看这里。

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

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

Output:

输出：

Document-ready 2 was called!

文档就绪 2 被调用！

回答by Arlo Guthrie

Not to necro a thread, but under the latest version of jQuerythe 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/