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 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 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
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
基于php权限分配的实现代码
2013/04/28 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
js比较日期大小的方法
2015/05/12 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
Python splitlines使用技巧
2008/09/06 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
python unichr函数知识点总结
2020/12/16 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
社会调查研究计划书
2014/05/01 职场文书
环保倡议书格式范文
2014/05/14 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
负责人任命书范本
2014/06/04 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书