如何控制jquery的ready事件

時間 2019-11-16

原文原文鏈接

本人博客：【www.xiabingbao.com】
文章正式地址：www.xiabingbao.com/jquery/2015/06/27/jquery-holdready by wenzijavascript

1. 遇到的狀況

一般咱們在使用jquery中的ready事件時，是在頁面加載完成後觸發的，防止由於頁面沒加載完成而獲取不到DOM元素。以下面的例子：html

<!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，這時應該怎麼辦呢？java

setTimeout(function(){
    console.log("timeout");
}, 500)
$(function(){
    console.log("ready");
})

2. 延遲ready執行的方法

下面有幾種延遲ready執行的方法。jquery

2.1 修改ready方法的位置

js通常狀況下是按照上下順序執行的，咱們能夠根據這種設定來延遲ready的執行。函數

$('#submit').click(function(){
    // 執行ready
    $(function(){
        console.log("ready");
    })
})

點擊submit元素以後再觸發ready。this

2.2 使用$.holdReady()

上面的代碼雖然能在click以後再觸發ready方法，可是這樣寫畢竟很差，若ready裏的內容不少呢？那邏輯就比較亂了。其實，在jquery中已經提供了延遲ready方法執行的辦法了：$.holdReady()。仍是使用第1節的例子：spa

setTimeout(function(){
    console.log("timeout");
    // 釋放ready方法，開始執行
    $.holdReady(false);
}, 500)

// 把ready方法hold住，暫時不讓ready執行
$.holdReady(true);
$(function(){
    console.log("ready");
})

使用$.holdReady()就能先輸出timeout，再輸出ready，在setTimeout執行完畢後再執行ready。code

$.holdReady(true)和$.holdReady(false)都是成對出現，若ready須要等待多個請求完成後再執行，能夠這樣寫：htm

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。事件

2.3 使用$.readyWait

在2.2中，若須要等待多個請求時，得寫好幾個$.holdReady(true)，不過能夠換一種方式，使用$.readyWait來進行控制，把$.readyWait的值設置爲限制的次數+1就行。爲何要+1呢？由於在jquery的源碼裏，就會直接執行一次ready方法，所以$.readyWait也須要把把這個次數也得算上。上面的代碼也能夠寫成這樣：

setTimeout(function(){
    console.log('timeout0');
    $.holdReady(false);
}, 500);
setTimeout(function(){
    console.log('timeout1');
    $.holdReady(false);
}, 600);
setTimeout(function(){
    console.log('timeout2');
    $.holdReady(false);
}, 700);

$.readyWait = 4;
$(function(){
    console.log('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 );
    }
}

那麼讓咱們來分析一下ready中的流程控制：

4. 總結

咱們再回到剛開始的那個例子：

setTimeout(function(){
    console.log("timeout");
    $.holdReady(false);
}, 500)

$.holdReady(true);
$(function(){
    console.log("ready");
})

原本$.readyWait的默認值是1，執行$.holdReady(true)後，$.readyWait的值變爲2。jquery裏會先直接執行一次$.ready(true)方法，結果發現ready裏--jQuery.readyWait的值是1，不能向下執行。當執行setTimeout裏的$.holdReady(false);時，再次執行$.ready(true)，前面 jQuery.readyWait 已是1了，而後--jQuery.readyWait的值就是0了，0表示沒有請求須要等待了，開始觸發document上的ready事件。

咱們剛纔在2.3節使用到了$.readyWait，其實這個變量是供jquery內部使用的，並無對外公佈，對外公佈的是$.holdReady。所以，若沒有特別的狀況，使用$.holdReady()就能控制ready的執行了。

本人博客：【www.xiabingbao.com】
文章正式地址：www.xiabingbao.com/jquery/2015/06/27/jquery-holdready by wenzi