如何使用jquery中的ready事件?ready事件實例用法-js教程-PHP中文網

首頁

web前端

js教程

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

伊谢尔伦

Jun 16, 2017 pm 03:44 PM

jquery使用如何

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

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。