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

web前端|js教程

jquery,ready,中如何,使用

web前端-js教程

广告机发布系统源码,vscode安装vetur,pcilib ubuntu,yum 卸载tomcat,c#+sqlite自动创建,wordpress免费主题插件下载,h5棋牌游戏前端框架,爬虫点击勾选确认阅读,php startup,合肥seo公司价格,农业公司网站源码,c 象棋游戏网页项目源码,android应用模板下载lzw

jQuery.holdReady()方法用法实例

网店app 源码,ubuntu网线无法连接,tomcat如何修改启动用户,网络爬虫系统应用,php多层循环使用教程学习,seo精髓技巧lzw

调用此方法可以延迟jQuery的ready事件，也就是说尽管文档已经加载完成，也不会执行ready事件处理方法。

可以多次调用jQuery.holdReady()方法，以延迟jQuery的ready事件，当满足一定条件时，再通过将此方法的参数设置为false，一一解除延迟。方法一般用于动态脚本加载，知道脚本加载完成然后再通过将此方法的参数设置为false，解除对jQuery.ready()事件延迟。

英文目录站源码,ubuntu锁定系统命令,面部搜索爬虫软件,php中,佛山seo行业lzw

通常我们在使用jquery中的ready事件时，是在页面加载完成后触发的，防止因为页面没加载完成而获取不到DOM元素。如下面的例子：

$(function(){ // 页面加载完成后再获取content元素 console.log($(#content).html()); }) // 获取不到元素 console.log($(#main).html());

this is content

this is main

像上面的情况，当页面中的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( imeout0); $.holdReady(false);}, 500);setTimeout(function(){ console.log( imeout1); $.holdReady(false);}, 500);setTimeout(function(){ console.log( imeout2); $.holdReady(false);}, 500);$.holdReady(true);$.holdReady(true);$.holdReady(true);$(function(){ console.log( eady);})

上面的代码是三个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事件实例用法》对你有帮助，请点赞、收藏，并留下你的观点哦！