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 动态生成方法的例子
Jul 22 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Jqprint实现页面打印
Jan 06 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
python之array赋值技巧分享
2019/11/28 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
教师求职自荐信范文
2015/03/04 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL