首頁 > 文章 > web前端 > jQuery.holdReady(hold)的使用方法實例詳解

jQuery.holdReady(hold)的使用方法實例詳解

伊谢尔伦原創: 2017-06-16 15:20:072109瀏覽

暫停或復原.ready() 事件的執行。

在$.holdReady()方法允許呼叫者延遲jQuery的ready事件。這種先進的功能，通常是使用動態腳本載入器，要載入的JavaScript例如 jQuery插件，如額外的ready事件才會讓事件發生，即使在DOM可能準備。此方法必須早在檔案調用，在這樣93f0f5c25f18dab9d176bd4f6de5d30e jQuery腳本後，立即標記。 ready事件之後呼叫此方法即使已經發射也將沒有任何效果。

要延遲ready事件，第一次呼叫的$.holdReady(true)。當ready事件應該執行時，呼叫$.holdReady(false) 。請注意，多個holds可以放在ready事件上，每個$.holdReady(true)逐一呼叫。 ready事件將不會執行，直到所有已發布了相應的一個$.holdReady(false) 和正常的文件準備好條件得到滿足。

jQuery.holdReady(hold) 傳回值型別boolean

jquery.holdReady()方法允許jQuery的完成事件被該函數鎖定。
這個高階功能的典型應用場合是動態載入腳本，例如jQuery外掛程式等。
在附加的腳本載入完成前，即使頁面已經準備好，jQuery的完成事件也不會被觸發。
這個函數必須在頁面的前部分被調用，例如在標籤當中，jQuery載入下一行。
在完成事件被觸發後呼叫此函數沒有任何效果。
使用方法：先呼叫.holdReady(true)[呼叫後完成事件將被鎖定]。當準備好觸發完成事件時，呼叫.holdReady(false)。要注意的是，
可以對完成事件新增多個鎖定，每個鎖定對應一次$.holdReady(false)[解鎖]呼叫。
jQuery的完成事件將在所有的鎖定都被解除，並且頁面也已經準備好的情況下被觸發。
其實就是為一些需要依賴動態腳本的程式碼加的安全鎖，
當所需要的動態腳本載入完畢後再執行就緒事件，而不是在DOM樹建置成功後執行。

實例程式碼:

實例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>php.cn</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery.holdReady(true);
$(document).ready(function(){
  alert("我不会被弹出");
})
</script>
</head>
<body>
  
</body>
</html>

在上述程式碼中，由於新增了jQuery.holdReady(true)，所以儘管文件載入完成，也不會執行ready()中的函數。

實例二:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>php.cn</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
</head>
<body>
<button id="first">点击测试弹出</button>
<button id="second">解除延迟</button>
<script type="text/javascript">
jQuery.holdReady(true) 
$(document).ready(function(){
  $("#first").click(function(){
    alert("我不会被弹出");
  })
})
$("#second").click(function(){
  jQuery.holdReady(false);
})
</script>
</body>
</html>

當點擊解除延遲之後，就可以彈出了。

再來看看小範例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<title>Insert title here</title></head>
<body>
<input type="button" id="btn" value="呵呵">
</body>
</html>

然後有兩個js檔

首先載入的是index.js

$.holdReady(true);//将holdReady改为ture,点击按钮就没有任何效果,改为false就可以是用来里面的js事件$(function(){
    $(&#39;#btn&#39;).click(function(){
        alert(123);
    });

});

下面寫了兩個js檔案 index.js和hold.js

#jsp中只載入index.js，在index.js裡決定是否載入hold.js
程式碼如下：

//hold.js$(function(){
    alert(&#39;这是使用holdReady加载出来的&#39;);
}); 

//index.jsjQuery.holdReady(true)
$.getScript("hold.js", function() {
    jQuery.holdReady(false);
});

載入hold.js的時候呼叫一個回呼函數，將true改為false，這樣就可以載入hold.js檔

以上是jQuery.holdReady(hold)的使用方法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：jQuery如何自訂一個回呼函數下一篇：jQuery如何自訂一個回呼函數

看更多