JavaScript 实现延迟执行与定时任务的三种实用方案

JavaScript 延迟执行概述

在前端开发中，经常需要在JavaScript页面中实现方法的延迟执行。

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

基于 setTimeout 的延迟查询实现

以下是我在实际项目中用到的一些例子。

 
实现延迟查询功能：传入一个查询按钮的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);
} 
}