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 相关文章推荐
JS往数组中添加项性能分析
Feb 25 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 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(3)
2006/10/09 PHP
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
jquery的ajax请求全面了解
2013/03/20 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python re模块介绍
2014/11/30 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python Django批量导入不重复数据
2016/03/25 Python
python实现log日志的示例代码
2018/04/28 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
大学军训感言600字
2014/02/25 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
责任心演讲稿
2014/05/14 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
银行催款通知书
2015/04/17 职场文书
大学军训口号大全
2015/12/24 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL