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

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

伊谢尔伦原創: 2017-06-16 15:44:561570瀏覽

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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery.holdReady(hold)的使用方法實例詳解下一篇：jQuery.holdReady(hold)的使用方法實例詳解

看更多