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提交表单数据的两种方式
Nov 24 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
vue axios整合使用全攻略
May 24 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
微信小程序身份证验证方法实现详解
Jun 28 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue实现弹幕功能
2019/10/25 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
python之wxPython应用实例
2014/09/28 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python3.4爬虫demo
2019/01/22 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python实现上下文管理器的方法
2020/08/07 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
初中政治教学反思
2014/01/17 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript