Question

问题：

如果我链接两个带有$(document).ready函数的JavaScript文件，会发生什么？有人会覆盖另一个吗？或者两个$(document).ready都被调用？

例如，

<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：

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

jquery2.js：

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

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

Answer 1

所有人都会被执行并且首先打电话给第一次运行!!

<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正如您所看到的，他们并没有互相替换

我还想提一件事

代替这个

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

您可以使用此快捷方式

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

Answer 2

重要的是要注意每个jQuery()调用必须实际返回。如果在一个异常中抛出异常，则永远不会执行后续（无关）调用。

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

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

Answer 3

（文档）$。就绪（）;与任何其他功能相同。一旦文件准备好就会触发 - 即装载。问题是当多个$（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>');

});

两者的行为完全相同。唯一的区别是，虽然前者会达到同样的效果。后者运行速度会快一点点，并且需要更少的打字。：）

总之，只有可能只使用1 $（文件）.ready（）;

//旧回答

他们都会按顺序被召唤。最佳做法是将它们结合起来。但不要担心，如果它不可能。页面不会爆炸。

Answer 4

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

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

Answer 5

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

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

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

输出：

文件就绪2被召唤！

Answer 6

不破坏线程，但是在最新版本的jQuery下，建议的语法为：

$( handler )

使用匿名函数，看起来像

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

查看此链接：

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

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

6 个答案: