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 源代码显示控件 (Ajax加载方式).
May 18 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 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调试函数和日志记录函数分享
2015/01/31 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python获取array中指定元素的示例
2019/11/26 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
python中pdb模块实例用法
2021/01/15 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
销售团队口号大全
2014/06/06 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python