本文介绍了在JavaScript中实现延迟执行的几种常见方式，重点讲解了基于setTimeout的三种实际应用案例：包括通过防抖机制优化表单搜索提交、自动创建并定时关闭遮罩层，以及实现验证码获取的倒计时功能。文章提供了完整的代码示例与逻辑解析，帮助开发者解决前端交互中的时间控制问题。
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);
}
}