一些延迟方法 Js

一般在JS页面延迟执行一些方法。可以使用以下的方法

jQuery.delay()方法简介

http://shawphy.com/2010/11/jquery-delay.html

jQuery中queue和dequeue的用法

http://shawphy.com/2009/04/how-to-use-queue-and-dequeue.html

Window.setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout?redirectlocale=en-US&redirectslug=DOM%2Fwindow.setTimeout

以下是我用到的一些例子。

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