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 获取URL的GET参数值的小例子
Apr 18 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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中static和const关键字用法分析
2016/12/07 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
移动节点的jquery代码
2014/01/13 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
python学习必备知识汇总
2017/09/08 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python实现学校管理系统
2018/01/11 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
应届生学校辅导员求职信
2013/11/07 职场文书
问卷调查计划书
2014/01/10 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
2015年党员承诺书
2015/01/21 职场文书
学前班教学反思
2016/02/24 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
利用Java连接Hadoop进行编程
2022/06/28 Java/Android