답변:
여러 개를 가질 수 있지만 항상 가장 쉬운 것은 아닙니다. 가독성에 심각한 영향을 미치므로 남용하지 마십시오. 그 외에는 완벽하게 합법적입니다. 아래를보십시오 :
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(function() {
// Jquery
$('.hide').hide();
$('.test').each(function() {
$(this).fadeIn();
});
// Reqular JS
function test(word) {
alert(word);
}
test('hello!');
});예 , 여러 $ (document) .ready () 호출이 가능합니다. 그러나 나는 그들이 어떤 방식으로 처형 될지를 알 수 없다고 생각합니다. (출처)
Ready handlers bound this way are executed after any bound by the other three methods above.
예 가능하지만 div #mydiv를 더 잘 사용하고 둘 다 사용할 수 있습니다
$(document).ready(function(){});
//and
$("#mydiv").ready(function(){});더 좋은 방법은 스위치를 명명 된 기능으로 전환하는 것입니다 (해당 주제에 대한 자세한 내용은 오버플로 확인) . 그렇게하면 단일 이벤트에서 전화를 걸 수 있습니다.
이렇게 :
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 라이브러리를 사용하고 프로젝트 페이지에 2 개의 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 블록 내에 명명되지 않은 여러 함수가있는 방법이 있는지 조사하는 동안이 질문을 발견했습니다. 구문을 올바르게 얻을 수 없었습니다. 나는 마침내 그것을 알아 냈고, 내 테스트 코드를 게시함으로써 다른 사람들이 내가 가진 동일한 질문에 대한 답을 찾는 데 도움이되기를 바랍니다.