3.2.2 jQuery与jQuery.holdReady

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.8k 阅读时长 ≈ 2 分钟

3.2.2 jQuery与jQuery.holdReady

$(document).ready()方法简写

jQuery()核心函数还有一个用法。
jQuery(callback):其是$(document).ready()的缩写,其中callback指定一个函数,在页面加载完成时自动激发callback,该函数返回将页面document对象包装成的jQuery对象。例如如下代码可以保证当页面装载完成后自动执行:

1
2
3
4
$(function()
{
    alert("页面装载完成!");
});

在浏览器中浏览该页面将会看到,jQuery可以保证页面装载完成后自动调用上面代码。

延迟执行jQuery的ready事件绑定的事件处理函数

除此之外,jQuey还为该函数提供了如下配套函数。
jQuery.holdReady(true或者false):指定是否需要延迟执行jQuery 的ready()事件绑定的事件处理函数。需要指出的是,程序可以多次调用holdReady(true)来延迟ready事件的事件处理函数。如果绑定了多个holdReady(true),则需要多次调用holdReady(false)来解除延迟,否则ready()事件绑定的事件处理函数将不会被激发。

程序示例

看如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> holdReady()函数 </title>
</head>
<body>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 延迟ready()事件处理函数
        $.holdReady(true);
        // 指定页面装载完成后自动回调该函数
        $(() => {
            alert("页面装载完成！");
        });
        // 设置2秒后取消延迟ready()事件处理函数
        window.setTimeout("$.holdReady(false);", 2000);
    </script>
</body>
</html>

该页面代码本来可以立即执行alert(″页面装载完成!″);的,但由于页面开始使用了holdReady(true)来延迟ready()事件,并指定在2s后才取消延迟,因此该页面需要在2s之后才能弹出提示框。

jQuery.holdReady函数实现等待其他脚本加载完毕

jQuery.holdReady是一个非常有用的函数,当程序需要在页面装载完成,并且某些脚本和代码动态加载完成后才激发指定函数时,就可以使用jQuery.holdReady了。例如如下代码:

1
2
3
4
$.holdReady(true);
$.getScript("xxx.js", function(){
    $.holdReady(false);
});

这里的代码保证只有xxx.js被动态加载完成后,才能解除ready()事件的延迟。

本文重点

  • jQuery(回调函数):是$(document).ready(回调函数)的简写形式,该函数会在页面加载完成时自动激发回调函数,
  • holdReady()方法用来延迟执行jQuery 的ready()事件绑定的事件处理函数,当调用$.holdReady(true)时,该jQurey对象注册的ready()事件处理程序将延期执行,直到调用该jQurey对象的.holdReady(false)方法解除延期为止。