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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
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 pdo连接数据库操作示例
2019/11/18 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python中的字符串内部换行方法
2018/07/19 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python读写csv文件的方法
2019/08/13 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
python线程池如何使用
2020/05/28 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
用python实现学生管理系统
2020/07/24 Python
python中Mako库实例用法
2020/12/31 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
在校硕士自我鉴定
2014/01/23 职场文书
副董事长岗位职责
2014/04/02 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
政府采购方案
2014/06/12 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers