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 相关文章推荐
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
Angular工具方法学习
Dec 26 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 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连接access数据库方法
2013/11/11 PHP
php导出CSV抽象类实例
2014/09/24 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
python 打印对象的所有属性值的方法
2016/09/11 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python assert语句的简单使用示例
2019/07/28 Python
python虚拟环境完美部署教程
2019/08/06 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
有关九一八事变的演讲稿
2014/09/14 职场文书
六一亲子活动感想
2015/08/07 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Minikube搭建Kubernetes集群
2022/03/31 Servers
Python 图片添加美颜效果
2022/04/28 Python