JS页面延迟执行一些方法(整理)


Posted in Javascript onNovember 11, 2013

一般在JS页面延迟执行一些方法。可以使用以下的方法
jQuery.delay()方法简介
http://shawphy.com/2010/11/jquery-delay.html
jQuery中queue和dequeue的用法
https://3water.com/article/25481.htm
Window.setTimeout
https://3water.com/article/20741.htm
以下是我用到的一些例子。

//延迟查询,传一个查询btn的ID,然后根据它附近的FORM绑定,当FORM里面的控件被触发或被输入了就会500毫秒后模拟点击查询按钮 
var timeout; 
function searchTrigerInit(btnId){ 
var $form = $("#"+btnId).closest("form"); 
$form.find("input").not(".search_onblur").keyup(function(){ 
searchTriger(btnId); 
}); 
$form.find("input.search_onblur").blur(function(){ 
searchTriger(btnId); 
}); 
$form.find("input[type=checkbox]").change(function(){ 
searchTriger(btnId); 
}); 
$form.find("select").change(function(){ 
searchTriger(btnId); 
}); 
} 
function searchTriger(btnId){ 
if(timeout != null){ 
clearTimeout(timeout); 
} 
timeout = setTimeout("searchBtnClick('"+btnId+"')",500); 
} 
function searchBtnClick(btnId){ 
$("#"+btnId).click(); 
}

定义遮罩层,相隔一分钟后关闭
var hideTimeout; 
function showLayerMask(){ 
$layerMask = $(".layerMask"); 
if($layerMask.length == 0){ 
var div = ""; 
var width = document.body.clientWidth; 
var Height = document.body.scrollHeight; 
var img = "<img src='"+resourcePath+"/src/images/loading2.gif' />"; 
div += "<div class='layerMask' style='width:100%;height:" + Height + "px;'>"; 
div += img; 
div += "</div>"; 
var $body = $("body"); 
$body.prepend(div); 
} 
$layerMask.show(); 
//1分钟后取消 
hideTimeout = setTimeout(hideLayerMask,60000); 
} 
function hideLayerMask(){ 
if(hideTimeout != null){ 
clearTimeout(hideTimeout); 
} 
$layerMask = $(".layerMask"); 
$layerMask.hide(); 
}

倒计时
var emailTime = 30; 
function nextCanDo(){ 
$("#mailValidateCodeBtn").val(emailTime+"秒"); 
emailTime -= 1; 
if(emailTime ==0 ){ 
$("#mailValidateCodeBtn").val("重新获取验证码"); 
$("#mailValidateCodeBtn").attr("disabled",false); 
emailTime = 30; 
}else{ 
setTimeout("nextCanDo()",1000); 
} 
}
Javascript 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
jquery 缓存问题的几个解决方法
Nov 11 #Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 #Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 #Javascript
javascript打印输出json实例
Nov 11 #Javascript
JS简单的图片放大缩小的两种方法
Nov 11 #Javascript
js全屏显示显示代码的三种方法
Nov 11 #Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 #Javascript
You might like
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
django解决跨域请求的问题
2018/11/11 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python实现大文本文件分割
2019/07/22 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Final类有什么特点
2012/04/25 面试题
实习求职信
2013/12/01 职场文书
图书室管理制度
2014/01/19 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
活动总结格式
2014/08/30 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书