如何使用jquery中的ready事件?ready事件实例用法
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($('#content').html());
}) // 获取不到元素
console.log($('#main').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的执行。
$('#submit').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('timeout0');
$.holdReady(false);
}, 500);
setTimeout(function(){
console.log('timeout1');
$.holdReady(false);
}, 500);
setTimeout(function(){
console.log('timeout2');
$.holdReady(false);
}, 500);
$.holdReady(true);
$.holdReady(true);
$.holdReady(true);
$(function(){
console.log('ready');
})上面的代码是三个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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
crystaldiskmark是什么软件？-crystaldiskmark如何使用？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark是一款适用于硬盘的小型HDD基准测试工具，可以快速测量顺序和随机读/写速度。接下来就让小编为大家介绍一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介绍CrystalDiskMark是一款广泛使用的磁盘性能测试工具，用于评估机械硬盘和固态硬盘（SSD）的读写速度和随机I/O性能。它是一款免费的Windows应用程序，并提供用户友好的界面和各种测试模式来评估硬盘驱动器性能的不同方面，并被广泛用于硬件评
foobar2000怎么下载？-foobar2000怎么使用
Mar 18, 2024 am 10:58 AM
foobar2000是一款能随时收听音乐资源的软件，各种音乐无损音质带给你，增强版本的音乐播放器，让你得到更全更舒适的音乐体验，它的设计理念是将电脑端的高级音频播放器移植到手机上，提供更加便捷高效的音乐播放体验，界面设计简洁明了易于使用它采用了极简的设计风格，没有过多的装饰和繁琐的操作能够快速上手，同时还支持多种皮肤和主题，根据自己的喜好进行个性化设置，打造专属的音乐播放器支持多种音频格式的播放，它还支持音频增益功能根据自己的听力情况调整音量大小，避免过大的音量对听力造成损害。接下来就让小编为大
百度网盘app怎么用
Mar 27, 2024 pm 06:46 PM
在如今云存储已经成为我们日常生活和工作中不可或缺的一部分。百度网盘作为国内领先的云存储服务之一，凭借其强大的存储功能、高效的传输速度以及便捷的操作体验，赢得了广大用户的青睐。而且无论你是想要备份重要文件、分享资料，还是在线观看视频、听取音乐，百度网盘都能满足你的需求。但是很多用户们可能对百度网盘app的具体使用方法还不了解，那么这篇教程就将为大家详细介绍百度网盘app如何使用，还有疑惑的用户们就快来跟着本文详细了解一下吧！百度云网盘怎么用：一、安装首先，下载并安装百度云软件时，请选择自定义安装选
网易邮箱大师怎么用
Mar 27, 2024 pm 05:32 PM
网易邮箱，作为中国网民广泛使用的一种电子邮箱，一直以来以其稳定、高效的服务赢得了用户的信赖。而网易邮箱大师，则是专为手机用户打造的邮箱软件，它极大地简化了邮件的收发流程，让我们的邮件处理变得更加便捷。那么网易邮箱大师该如何使用，具体又有哪些功能呢，下文中本站小编将为大家带来详细的内容介绍，希望能帮助到大家！首先，您可以在手机应用商店搜索并下载网易邮箱大师应用。在应用宝或百度手机助手中搜索“网易邮箱大师”，然后按照提示进行安装即可。下载安装完成后，我们打开网易邮箱账号并进行登录，登录界面如下图所示
BTCC教学：如何在BTCC交易所绑定使用MetaMask钱包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸钱包）是一款免费的、广受好评的加密钱包软件。目前，BTCC已支持绑定MetaMask钱包，绑定后可使用MetaMask钱包进行快速登入，储值、买币等，且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中，我们将详细介绍如何注册和使用MetaMask，以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么？MetaMask小狐狸钱包拥有超过3,000万用户，是当今最受欢迎的加密货币钱包之一。它可免费使用，可作为扩充功能安装在网络
教你使用 iOS 17.4「失窃设备保护」新进阶功能
Mar 10, 2024 pm 04:34 PM
Apple在周二推出了iOS17.4更新，为iPhone带来了一系列新功能和修复。这次更新包括了全新的表情符号，同时欧盟用户也能够下载其他应用商店。此外，更新还加强了对iPhone安全性的控制，引入了更多的「失窃设备保护」设置选项，为用户提供更多选择和保障。"iOS17.3首次引入了“失窃设备保护”功能，为用户的敏感资料增加了额外的安全保障。当用户不在家等熟悉地点时，该功能要求用户首次输入生物特征信息，并在一小时后再次输入信息才能访问和更改某些数据，如修改AppleID密码或关闭失窃设备保护功能
小米汽车app怎么用
Apr 01, 2024 pm 09:19 PM
小米汽车软件提供远程车控功能，让用户可以通过手机或电脑远程控制车辆，例如开关车辆的门窗、启动引擎、控制车辆的空调和音响等，下文就是这个软件的使用及内容，一起了解下吧。小米汽车app功能及使用方法大全1、小米汽车app在3月25日上线苹果AppStore，现在安卓手机的应用商店中也可以下载了;购车：了解小米汽车核心亮点和技术参数，可预约试驾、配置订购您的小米汽车，支持在线处理提车待办事项。3、社区：了解小米汽车品牌资讯，交流用车体验，分享精彩车生活;4、车控：手机就是遥控器，远程控制，实时安防，轻
小黑盒cdkey如何使用
Mar 12, 2024 pm 07:34 PM
如何使用小黑盒cdkey呢?简单来说，您可直接在小黑盒选购Steam平台的游戏，成功购买后将获取一个CDK兑换码。接下来，在Steam商城使用此兑换码即可购得相应游戏。许多朋友可能还不了解如何使用小黑盒cdkey，下面我将为您详细说明其兑换步骤，希望对您有所帮助。小黑盒cdkey如何使用1、先复制购买小黑盒游戏后得到的cdk兑换码。2、随后启动Steam平台。3、点开左上角菜单中的“游戏”选项。4、在新菜单中找到并点击“在Steam上激活产品”。5、在弹出的界面直接点选下一步。6、将小黑盒购买的
