jQuery-多个$(document).ready …?

2020/09/30 08:41 · javascript ·  · 0评论

题:

如果我链接两个都带有$(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但是在我的情况下这不太可能。

所有人将被执行,并且在首次调用的基础上运行!

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

演示如您所见,它们不会互相替换

我还要提一件事

代替这个

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

您可以使用此快捷方式

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

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

这与语法无关。您可以使用jQuery()jQuery(function() {})$(document).ready(),任何你喜欢的,行为是一样的。如果早期模块失败,则后续的模块将永远不会运行。

使用第三方库时,这对我来说是个问题。一个库引发异常,随后的库从未初始化任何东西。

$(document).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>');

});

两者的行为完全相同。唯一的区别是,尽管前者将获得相同的结果。后者将运行几分之一秒,并且需要更少的键入。:)

总之,只要有可能,仅使用1 $(document).ready();

//旧答案

他们都会被依次召唤。最佳实践是将它们结合起来。但不要担心,如果不可能。该页面不会爆炸。

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

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

两者都会被叫,先到先得。在这里看看

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

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

输出:

准备好文档2!

不是要破坏线程,而是在最新版本下jQuery建议的语法是:

$( handler )

使用匿名函数,这看起来像

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

看到这个链接:

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

本文地址:http://javascript.askforanswer.com/jquery-duogedocument-ready.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!