首頁 > web前端 > js教程 > 如何使用jquery中的ready事件?ready事件實例用法

如何使用jquery中的ready事件?ready事件實例用法

伊谢尔伦
發布: 2017-06-16 15:44:56
原創
1602 人瀏覽過

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($(&#39;#content&#39;).html());
        })        // 获取不到元素
        console.log($(&#39;#main&#39;).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的執行。

$(&#39;#submit&#39;).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(&#39;timeout0&#39;);
    $.holdReady(false);
}, 500);
setTimeout(function(){
    console.log(&#39;timeout1&#39;);
    $.holdReady(false);
}, 500);
setTimeout(function(){
    console.log(&#39;timeout2&#39;);
    $.holdReady(false);
}, 500);
$.holdReady(true);
$.holdReady(true);
$.holdReady(true);
$(function(){
    console.log(&#39;ready&#39;);
})
登入後複製

上面的程式碼是三個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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板