你可以有多个$(document).ready(function(){…});章节?

小开

最佳答案

你可以有多个，但这并不总是最明智的做法。尽量不要过度使用，因为这会严重影响可读性。除此之外，这完全合法。请看以下内容:

http://www.learningjquery.com/2006/09/multiple-document-ready

试试这个吧:

$(document).ready(function() {
alert('Hello Tom!');
});


$(document).ready(function() {
alert('Hello Jeff!');
});


$(document).ready(function() {
alert('Hello Dexter!');
});

你会发现它和这个是等价的，注意执行顺序:

$(document).ready(function() {
alert('Hello Tom!');
alert('Hello Jeff!');
alert('Hello Dexter!');
});

同样值得注意的是，在一个$(document).ready块中定义的函数不能从另一个$(document).ready块中调用，我刚刚运行了这个测试:

$(document).ready(function() {
alert('hello1');
function saySomething() {
alert('something');
}
saySomething();


});
$(document).ready(function() {
alert('hello2');
saySomething();
});

输出是:

hello1
something
hello2

小开

是的可以有多个$(document).ready()调用。然而，我不认为你能知道他们将以何种方式执行。(源)

小开

是的，你可以很容易地拥有多个区块。只是要小心它们之间的依赖关系，因为求值顺序可能不是您所期望的。

小开

你可以使用multiple。但是您也可以在一个文档中使用多个函数。准备好了:

$(document).ready(function() {
// Jquery
$('.hide').hide();
$('.test').each(function() {
$(this).fadeIn();
});


// Reqular JS
function test(word) {
alert(word);
}
test('hello!');
});

小开

是的，你可以。

如果您有其他模块使用同一个页面，那么多个文档就绪部分将特别有用。使用旧的window.onload=func声明，每次指定要调用的函数时，它都会替换旧的。

现在，所有指定的函数都被排队/堆叠(有人能确认吗?)，而不管它们是在哪个文档准备部分中指定的。

小开

是的，这是可能的，但你可以更好地使用一个div #mydiv和使用两者

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


//and


$("#mydiv").ready(function(){});

小开

是的，完全没问题。但是要避免没有理由就这么做。例如，当我的javascript文件动态生成时，我使用它来声明全局站点规则，而不是单独的页面，但如果你只是不断地这样做，它会使它难以阅读。

你也不能从另一个方法中访问一些方法 jQuery(function(){});电话所以这是你不想这样做的另一个原因

而使用旧的window.onload则在每次指定函数时替换旧的window.onload。

小开

我认为更好的方法是将switch放到命名函数(查看这个溢出来的更多关于这个主题的信息)。这样您就可以从单个事件中调用它们。< / p >

像这样:

function firstFunction() {
console.log("first");
}


function secondFunction() {
console.log("second");
}




function thirdFunction() {
console.log("third");
}

这样就可以在一个就绪函数中加载它们。

jQuery(document).on('ready', function(){
firstFunction();
secondFunction();
thirdFunction();

});

这将输出以下到您的console.log:

first
second
third

这样就可以为其他事件重用这些函数。

jQuery(window).on('resize',function(){
secondFunction();
});

检查此小提琴的工作版本

小开

这是合法的，但有时会导致不良行为。作为一个例子，我使用MagicSuggest库，并在我的项目的一个页面中添加了两个MagicSuggest输入，并为每个输入的初始化使用了单独的文档就绪函数。第一个输入初始化成功了，但第二个没有，也没有给出任何错误，第二个输入没有显示。所以，我总是建议使用一个文档准备函数。

小开

您甚至可以在包含的html文件中嵌套文档就绪函数。下面是一个使用jquery的例子:

文件: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>

文件:test_embed.html

<h1>test_embed.html</h1>
<script>
$(document).ready( function()
{
console.log( 'test_embed.html READY' );
} );
</script>

控制台输出:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

浏览器显示:

test_embed.html

小开

你也可以这样做:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#test").hide();
});
$("#show").click(function(){
$("#test").show();
});
});
</script>
</head>


<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

前面的答案显示了在单个.ready块中使用多个命名函数，或者在.ready块中使用单个未命名函数，在.ready块外使用另一个已命名函数。我在研究是否有一种方法可以在.ready块中有多个未命名的函数时发现了这个问题-我无法得到正确的语法。我最终找到了答案，并希望通过发布我的测试代码来帮助其他人寻找我同样问题的答案