Rumah > Artikel > hujung hadapan web > jQuery.holdReady(hold)的使用方法实例详解

jQuery.holdReady(hold)的使用方法实例详解

伊谢尔伦asal: 2017-06-16 15:20:072109semak imbas

暂停或恢复.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文件

Atas ialah kandungan terperinci jQuery.holdReady(hold)的使用方法实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery如何自定义一个回调函数Artikel seterusnya：如何使用jquery中的ready事件?ready事件实例用法

Artikel berkaitan

Lihat lagi