jQuery.holdReady()方法用法實例
呼叫此方法可以延遲jQuery的ready事件，也就是說儘管文件已經載入完成，也不會執行ready事件處理方法。
可以多次呼叫jQuery.holdReady()方法，以延遲jQuery的ready事件，當滿足一定條件時，再透過將此方法的參數設為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。可是，有時候我們得需要等待其他元素載入完成後才能觸發ready事件，也就是先輸出timeout，然後再輸出ready，這時該怎麼辦呢？
setTimeout(function(){
console.log("timeout");
}, 500)
$(function(){
console.log("ready");
})2. 延遲ready執行的方法
下面有幾個延遲ready執行的方法。
2.1 修改ready方法的位置
js一般情況下是按照上下順序執行的，我們可以根據這個設定來延遲ready的執行。
$('#submit').click(function(){
// 执行ready
$(function(){
console.log("ready");
})
})點選submit元素之後再觸發ready。
2.2 使用$.holdReady()
上面的程式碼雖然能在click之後再觸發ready方法，但是這樣寫畢竟不好，若ready裡的內容很多呢？那邏輯就比較亂了。其實，在jquery中已經提供了延遲ready方法執行的辦法了：$.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');
})上面的程式碼是三個setTimeout都執行完畢後再執行ready。
3. 原始碼中對$.holdReady的實作
其實$.holdReady()在原始碼也是操作的$.readyWait的值，$.holdReady(true)讓$.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中文網其他相關文章！
