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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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 中文处理技巧
2010/04/25 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php显示页码分页类的封装
2017/06/08 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
javascript 函数调用规则
2009/08/26 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
js常用代码段整理
2011/11/30 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
ptyhon实现sitemap生成示例
2014/03/30 Python
python基础教程之常用运算符
2014/08/29 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python实现文法左递归的消除方法
2020/05/22 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
导游的职业规划书范文
2013/12/27 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android