jquery Ready 이벤트 인스턴스 사용법에서 Ready 이벤트를 사용하는 방법은 무엇입니까?
- 伊谢尔伦원래의
- 2017-06-16 15:44:561568검색
jQuery.holdReady() 메소드 사용 예
이 메소드를 호출하면 jQuery의 Readyevent가 지연될 수 있습니다. 즉, 문서가 로드되었더라도 Ready이벤트 처리 메소드가 실행되지 않습니다.
jQuery.holdReady() 메소드는 jQuery의 준비 이벤트를 지연시키기 위해 여러 번 호출될 수 있으며, 특정 조건이 충족되면 이 메소드의 매개변수를 false로 설정하여 지연을 하나씩 해제할 수 있습니다. 이 메소드는 일반적으로 동적 스크립트 로딩에 사용됩니다. 스크립트가 로드되면 이 메소드의 매개변수를 false로 설정하여 jQuery.ready() 이벤트에 대한 지연을 해제할 수 있습니다.
일반적으로 jquery에서 Ready 이벤트를 사용할 때 페이지가 로드되지 않아 DOM 요소를 가져오지 못하는 것을 방지하기 위해 페이지가 로드된 후에 실행됩니다. 다음 예와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>deom</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.2.js"></script>
<script type="text/javascript">
$(function(){ // 页面加载完成后再获取content元素
console.log($('#content').html());
}) // 获取不到元素
console.log($('#main').html());
</script>
</head>
<body>
<div id="content">this is content</div>
<div id="main">this is main</div>
</body>
</html>위의 상황과 마찬가지로 페이지의 DOM 요소가 로드되면 Ready 이벤트가 자동으로 트리거됩니다. 예를 들어 다음 예에서는 Ready가 먼저 출력된 다음 timeout이 출력되어야 합니다. 그러나 때로는 준비 이벤트를 트리거하기 전에 다른 요소가 로드될 때까지 기다려야 합니다. 즉, 먼저 출력 시간 초과가 발생한 다음 출력 준비가 완료되어야 합니다.
setTimeout(function(){
console.log("timeout");
}, 500)
$(function(){
console.log("ready");
})2. 준비 실행을 지연시키는 방법
준비 실행을 지연시키는 방법에는 여러 가지가 있습니다.
2.1 Ready 메소드 위치 수정
js는 일반적으로 위쪽, 아래쪽 순서로 실행됩니다. 이 설정에 따라 Ready 실행을 지연시킬 수 있습니다.
$('#submit').click(function(){
// 执行ready
$(function(){
console.log("ready");
})
})제출 요소를 클릭하면 트리거가 준비됩니다.
2.2 $.holdReady()를 사용하세요
위 코드는 클릭 후 Ready 메소드를 실행할 수 있지만, 이렇게 작성하는 것은 좋지 않습니다. 논리가 다소 혼란스럽습니다. 실제로 jquery는 이미 준비 메서드인 $.holdReady()의 실행을 지연하는 방법을 제공합니다. 여전히 섹션 1의 예를 사용합니다.
setTimeout(function(){
console.log("timeout");
// 释放ready方法，开始执行
$.holdReady(false);
}, 500)
// 把ready方法hold住，暂时不让ready执行
$.holdReady(true);
$(function(){
console.log("ready");
})$.holdReady()를 사용하면 먼저 timeout을 출력한 다음, Ready를 출력하고, setTimeout이 실행된 후 Ready를 실행할 수 있습니다.
$.holdReady(true) 및 $.holdReady(false)는 모두 쌍으로 나타납니다. Ready가 실행되기 전에 여러 요청이 완료될 때까지 기다려야 하는 경우 다음과 같이 작성할 수 있습니다.
setTimeout(function(){
console.log('timeout0');
$.holdReady(false);
}, 500);
setTimeout(function(){
console.log('timeout1');
$.holdReady(false);
}, 500);
setTimeout(function(){
console.log('timeout2');
$.holdReady(false);
}, 500);
$.holdReady(true);
$.holdReady(true);
$.holdReady(true);
$(function(){
console.log('ready');
})위 코드는 모두 세 개의 setTimeouts가 실행되었습니다. 그런 다음 실행 준비가 되었습니다.
3. 소스 코드에서 $.holdReady 구현
실제로 $.holdReady()는 소스 코드에서 $.readyWait 값도 작동합니다. 1, $.holdReady( false) $.readyWait 값을 -1로 두고, $.readyWait 값이 1일 때 Ready를 트리거합니다. $.readyWait의 기본값은 1이므로 기본적으로 Ready가 직접 트리거됩니다.
jQuery.extend({
// 表示ready方法是否正在执行，若正在执行，则将isReady设置为true
isReady: false,
// ready方法执行前需要等待的次数
readyWait: 1,
// hold或者释放ready方法，若参数为true则readyWait++，否则执行ready，传入参数为true
holdReady: function( hold ) {
if ( hold ) {
jQuery.readyWait++;
} else {
jQuery.ready( true );
}
},
// 当DOM加载完毕时开始执行ready
ready: function( wait ) {
// 若传入的参数为true，则--readyWait；否则判断isReady，即ready是否正在执行
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
return;
}
// Remember that the DOM is ready
jQuery.isReady = true;
// 若readyWait-1后还是大于0，则返回，不执行ready。
if ( wait !== true && --jQuery.readyWait > 0 ) {
return;
}
// If there are functions bound, to execute
readyList.resolveWith( document, [ jQuery ] );
// 触发ready方法，然后解除绑定的ready方法。
if ( jQuery.fn.triggerHandler ) {
jQuery( document ).triggerHandler( "ready" );
jQuery( document ).off( "ready" );
}
}
});$.holdReady의 함수 본문을 보면 $.holdReady(true)는 $.readyWait++를 허용하고 $.holdReady(false)는 $.ready(true)를 실행한다는 것을 알 수 있습니다.
holdReady: function( hold ) {
if ( hold ) {
jQuery.readyWait++;
} else {
jQuery.ready( true );
}
}위 내용은 jquery Ready 이벤트 인스턴스 사용법에서 Ready 이벤트를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!