jQuery 你能有多个 $(document).ready(function(){ ... }); 部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1327756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you have multiple $(document).ready(function(){ ... }); sections?
提问by leora
If I have a lot of functions on startup do they all have to be under one single:
如果我在启动时有很多功能，它们是否都必须在一个之下：
$(document).ready(function() {
or can I have multiple such statements?
或者我可以有多个这样的陈述吗？
回答by karim79
You can have multiple ones, but it's not always the neatest thing to do. Try not to overuse them, as it will seriously affect readability. Other than that , it's perfectly legal. See the below:
你可以有多个，但这并不总是最简单的事情。尽量不要过度使用它们，因为它会严重影响可读性。除此之外，这是完全合法的。请参阅以下内容：
http://www.learningjquery.com/2006/09/multiple-document-ready
http://www.learningjquery.com/2006/09/multiple-document-ready
Try this out:
试试这个：
$(document).ready(function() {
alert('Hello Tom!');
});
$(document).ready(function() {
alert('Hello Jeff!');
});
$(document).ready(function() {
alert('Hello Dexter!');
});
You'll find that it's equivalent to this, note the order of execution:
你会发现它等价于这个，注意执行顺序：
$(document).ready(function() {
alert('Hello Tom!');
alert('Hello Jeff!');
alert('Hello Dexter!');
});
It's also worth noting that a function defined within one $(document).readyblock cannot be called from another $(document).readyblock, I just ran this test:
还值得注意的是，一个$(document).ready块中定义的函数不能从另一个$(document).ready块调用，我只是运行了这个测试：
$(document).ready(function() {
alert('hello1');
function saySomething() {
alert('something');
}
saySomething();
});
$(document).ready(function() {
alert('hello2');
saySomething();
});
output was:
输出是：
hello1
something
hello2
回答by Mickel
You can use multiple. But you can also use multiple functions inside one document.ready as well:
您可以使用多个。但是你也可以在一个 document.ready 中使用多个函数：
$(document).ready(function() {
// Jquery
$('.hide').hide();
$('.test').each(function() {
$(this).fadeIn();
});
// Reqular JS
function test(word) {
alert(word);
}
test('hello!');
});
回答by pjesi
Yes you can easily have multiple blocks. Just be careful with dependencies between them as the evaluation order might not be what you expect.
是的，您可以轻松拥有多个块。请注意它们之间的依赖关系，因为评估顺序可能不是您所期望的。
回答by JW.
回答by JW.
Yes it is possible but you can better use a div #mydiv and use both
是的，这是可能的，但您可以更好地使用 div #mydiv 并同时使用两者
$(document).ready(function(){});
//and
$("#mydiv").ready(function(){});
回答by Neo
Yes, it's perfectly ok.but avoid doing it without a reason. For example I used it to declare global site rules seperately than indivual pages when my javascript files were generated dynamically but if you just keep doing it over and over it will make it hard to read.
是的，完全没问题。但是不要无缘无故地这样做。例如，当我的 javascript 文件是动态生成的时，我用它来单独声明全局站点规则而不是单个页面，但是如果你一遍又一遍地重复它，它将使它难以阅读。
Also you can not access some methods from another
jQuery(function(){});call
so that's another reason you don't wanna do that.
此外，您无法从另一个jQuery(function(){});调用访问某些方法，
因此这是您不想这样做的另一个原因。
With the old window.onloadthough you will replace the old one every time you specified a function.
使用旧的，window.onload但每次指定函数时都会替换旧的。
回答by James Wiseman
Yes you can.
是的你可以。
Multiple document ready sections are particularly useful if you have other modules haging off the same page that use it. With the old window.onload=funcdeclaration, every time you specified a function to be called, it replaced the old.
如果您在使用它的同一页面上有其他模块，则多个文档就绪部分特别有用。使用旧window.onload=func声明，每次指定要调用的函数时，它都会替换旧的。
Now all functions specified are queued/stacked (can someone confirm?) regardless of which document ready section they are specified in.
现在，所有指定的函数都已排队/堆叠（有人可以确认吗？），无论它们指定在哪个文档就绪部分。
回答by Jelle Verzijden
I think the better way to go is to put switch to named functions (Check this overflow for more on that subject). That way you can call them from a single event.
我认为更好的方法是切换到命名函数（检查此溢出以了解有关该主题的更多信息）。这样您就可以从单个事件中调用它们。
Like so:
像这样：
function firstFunction() {
console.log("first");
}
function secondFunction() {
console.log("second");
}
function thirdFunction() {
console.log("third");
}
That way you can load them in a single ready function.
这样你就可以在一个就绪函数中加载它们。
jQuery(document).on('ready', function(){
firstFunction();
secondFunction();
thirdFunction();
});
});
This will output the following to your console.log:
这会将以下内容输出到您的 console.log：
first
second
third
This way you can reuse the functions for other events.
这样您就可以为其他事件重用这些函数。
jQuery(window).on('resize',function(){
secondFunction();
});
回答by Nimantha Harshana Perera
It's legal, but sometimes it cause undesired behaviour. As an Example I used the MagicSuggest library and added two MagicSuggest inputs in a page of my project and used seperate document ready functions for each initializations of inputs. The very first Input initialization worked, but not the second one and also not giving any error, Second Input didn't show up. So, I always recommend to use one Document Ready Function.
这是合法的，但有时会导致不良行为。作为一个例子，我使用了 MagicSuggest 库，并在我的项目页面中添加了两个 MagicSuggest 输入，并为每个输入初始化使用了单独的文档就绪函数。第一个输入初始化工作，但不是第二个，也没有给出任何错误，第二个输入没有出现。所以，我总是建议使用一种文档就绪功能。
回答by Tim
You can even nest document ready functions inside included html files. Here's an example using jquery:
您甚至可以在包含的 html 文件中嵌套文档就绪函数。下面是一个使用 jquery 的例子：
File: test_main.html
文件：test_main.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="main-container">
<h1>test_main.html</h1>
</div>
<script>
$(document).ready( function()
{
console.log( 'test_main.html READY' );
$("#main-container").load("test_embed.html");
} );
</script>
</body>
</html>
File: test_embed.html
文件：test_embed.html
<h1>test_embed.html</h1>
<script>
$(document).ready( function()
{
console.log( 'test_embed.html READY' );
} );
</script>
Console output:
控制台输出：
test_main.html READY test_main.html:15
test_embed.html READY (program):4
Browser shows:
浏览器显示：
test_embed.html
test_embed.html
