How to use the ready event in jquery? Ready event instance usage-JS Tutorial-php.cn

How to use the ready event in jquery? Ready event instance usage

伊谢尔伦

Release： 2017-06-16 15:44:56

Original

1599 people have browsed it

jQuery.holdReady() method usage example

Calling this method can delay jQuery’s ready event, which means that even though the document has been loaded, it will not The readyevent handling method will be executed.
The jQuery.holdReady() method can be called multiple times to delay jQuery's ready event. When certain conditions are met, the delay can be lifted one by one by setting the parameters of this method to false. This method is generally used for dynamic script loading. Once the script is loaded, you can then set the parameters of this method to false to release the delay on the jQuery.ready() event.

Usually when we use the ready event in jquery, it is triggered after the page is loaded to prevent the DOM element from not being obtained because the page has not been loaded. As in the following example:

<!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>

Copy after login

Like the above situation, when the DOM elements in the page are loaded, the ready event will be automatically triggered. For example, in the following example, ready must be output first, and then timeout. However, sometimes we have to wait for other elements to be loaded before triggering the ready event, that is, output timeout first, and then output ready. What should we do in this case?

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

Copy after login

2. Methods to delay ready execution

There are several methods to delay ready execution.

2.1 Modify the position of the ready method

JS is generally executed in top and bottom order. We can delay the execution of ready based on this setting.

$(&#39;#submit&#39;).click(function(){   
 // 执行ready    
 $(function(){        
console.log("ready");    
     })
})

Copy after login

Trigger ready after clicking the submit element.

2.2 Use $.holdReady()

Although the above code can trigger the ready method after click, it is not good to write it this way. What if there is a lot of content in ready? The logic is rather confusing. In fact, jquery already provides a way to delay the execution of the ready method: $.holdReady(). Still using the example in Section 1:

setTimeout(function(){
    console.log("timeout");
    // 释放ready方法，开始执行
    $.holdReady(false);
}, 500)
// 把ready方法hold住，暂时不让ready执行
$.holdReady(true);
$(function(){
    console.log("ready");
})

Copy after login

Using $.holdReady() can output timeout first, then output ready, and then execute ready after setTimeout is executed.

$.holdReady(true) and $.holdReady(false) both appear in pairs. If ready needs to wait for multiple requests to complete before executing, you can write like this:

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;);
})

Copy after login

The above The code is to execute ready after all three setTimeouts have been executed.

3. Implementation of $.holdReady in the source code

In fact, $.holdReady() also operates the value of $.readyWait in the source code. $.holdReady(true) makes $.readyWait The value is +1, $.holdReady(false) makes the value of $.readyWait -1, and ready is triggered when the value of $.readyWait is 1. The default value of $.readyWait is 1, so ready will be triggered directly by default.

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" );
        }
    }
});

Copy after login

It can be seen from the function body of $.holdReady that $.holdReady(true) is to execute $.readyWait++, while $.holdReady(false) is to execute $.ready(true);

holdReady: function( hold ) {
    if ( hold ) {
        jQuery.readyWait++;
    } else {
        jQuery.ready( true );
    }
}

Copy after login

The above is the detailed content of How to use the ready event in jquery? Ready event instance usage. For more information, please follow other related articles on the PHP Chinese website!