JS页面延迟执行一些方法(整理)

更新时间：2013年11月11日 17:26:54 作者：

一般在JS页面延迟执行一些方法，本文整理了一些，大家可以尝试操作下

一般在JS页面延迟执行一些方法。可以使用以下的方法
jQuery.delay()方法简介
http://shawphy.com/2010/11/jquery-delay.html
jQuery中queue和dequeue的用法
https://www.jb51.net/article/25481.htm
Window.setTimeout
https://www.jb51.net/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); 
} 
} 

您可能感兴趣的文章:

js实现带缓冲效果的仿QQ面板折叠菜单代码
这篇文章主要介绍了js实现带缓冲效果的仿QQ面板折叠菜单代码,通过JavaScript定时函数递归调用实现折叠菜单的缓冲效果,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
JavaScript检测用户是否在线的6种方法总结
这篇文章主要为大家详细介绍了JavaScript中实现检测用户是否在线的6种常用方法,文中的示例代码讲解详细,感兴趣的可以跟随小编一起学习一下
2023-08-08
微信小程序与h5的相互跳转场景分析
这篇文章主要介绍了微信小程序与h5的相互跳转场景分析,在微信小程序内编写webview文件,通过webview去跳转h5,loadUrl为h5的地址,非嵌套,h5需要跳转打开某个微信小程序,需要的朋友可以参考下
2023-10-10
JavaScript异步编程的干货知识点分享
异步是什么意思？如何实现异步编程？不同的异步模式有哪些？本文将围绕这些问题和大家分享JavaScript异步编程中的重要知识点，需要的可以学习一下
2023-06-06
页面自定义拖拽布局
页面自定义拖拽布局...
2007-02-02
javaScript数组迭代方法详解
这篇文章主要为大家详细介绍了javaScript数组迭代方法，ECMAScript5为数组定义了5个迭代方法，感兴趣的小伙伴们可以参考一下
2016-04-04
js实现仿qq消息的弹出窗效果
这篇文章主要介绍了js实现仿qq消息的弹出窗效果，文章代码实现模拟qq弹出框消息提醒，感兴趣的小伙伴们可以参考一下
2016-01-01
js时间日期格式化封装函数
这里给大家推荐一款自己封装的js时间日期格式化的函数，非常的简洁实用，分享给有需要的小伙伴
2014-12-12
微信小程序云开发如何使用npm安装依赖
这篇文章主要为大家详细介绍了微信小程序云开发如何使用npm安装依赖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
js 中的柯里化与反柯里化的基础概念和用法
柯里化是将接受多个参数的函数转换成一系列只接受单个参数的函数的过程，而反柯里化是将柯里化函数转换成接受多个参数的函数的过程，本文将带大家理解 js 中的柯里化与反柯里化,需要的朋友可以参考下
2023-07-07