当前位置：首页 > 资讯 > 技术文档

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

时间：2022-07-29 08:51 编辑：来源：阅读：
扫一扫，手机访问

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

一般在JS页面延迟执行一些方法。可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中queue和dequeue的用法 [url=http://www.1sucai.cn/article/25481.htm]http://www.1sucai.cn/article/25481.htm[/url] Window.setTimeout [url=http://www.1sucai.cn/article/20741.htm]http://www.1sucai.cn/article/20741.htm[/url] 以下是我用到的一些例子。

[u]复制代码[/u] 代码如下:

//延迟查询，传一个查询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();
}

定义遮罩层，相隔一分钟后关闭

[u]复制代码[/u] 代码如下:

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();
}

倒计时

[u]复制代码[/u] 代码如下:

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);
}
}

全部评论(0)

上一篇：主页面中的两个iframe实现鼠标拖动改变其大小
下一篇：纯js三维数组实现三级联动效果

资讯排行榜
更多>>