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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Prototype String对象 学习
2009/07/19 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
numpy自动生成数组详解
2017/12/15 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python 异或加密字符串的实例
2018/10/14 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
数据库专业英语
2012/11/30 面试题
答谢会策划方案
2014/05/12 职场文书
专题组织生活会方案
2014/06/15 职场文书
法院授权委托书格式
2014/09/28 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis