multiple document ready in jquery

[jQuery] 여러 개의 $(document).ready(function(){ … }); 사용

$(document).ready()는 여러 번 사용이 가능합니다. 아래와 같이 두 가지 형식으로 두 개 이상을 사용할 수 있습니다. 다만 가독성에 문제가 있을 수 있으니 남용해서는 좋지 않겠죠?

$(document).ready(function() {
alert('홍길동님, 안녕하세요?');
});

$(document).ready(function() {
alert('철수님, 안녕하세요?');
});

$(document).ready(function() {
alert('영희님, 안녕하세요?');
});

위의 구문을 아래와 같이 바꿀 수도 있습니다.

$(document).ready(function() {
alert('홍길동님, 안녕하세요?');
alert('철수님, 안녕하세요?');
alert('영희님, 안녕하세요?');
});

한 가지 유의할 사항은 $(document).ready 블록에서 정의한 함수를 다른 $(document).ready 블록에서 호출할 수 없습니다.

또, 아래와 같이 하나의 document 안에 여러 개의 함수를 사용할 수 있습니다.

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

// Reqular JS
function test(word) {
alert(word);
}
test('안녕하세요!');
});
// Source: stackoverflow

위의 방식으로 여러 개의 $(document).ready()를 추가할 수 있지만, 특별한 이유가 없는 한 그다지 권장되지 않는다고 하네요. 가독성 문제도 있고 어쩌면 예상했던 대로 실행되지 않을 수 있습니다. Dependency에 특히 유의해야 합니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.