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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 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
第三节--定义一个类
2006/11/16 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
webpack file-loader和url-loader的区别
2019/01/15 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
计算机求职信
2013/12/01 职场文书
求职个人评价范文
2014/04/09 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
上诉答辩状范文
2015/05/22 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL