JS頁面延遲執(zhí)行一些方法(整理)
更新時(shí)間:2013年11月11日 17:26:54 作者:
一般在JS頁面延遲執(zhí)行一些方法,本文整理了一些,大家可以嘗試操作下
一般在JS頁面延遲執(zhí)行一些方法??梢允褂靡韵碌姆椒?
jQuery.delay()方法簡介
http://shawphy.com/2010/11/jquery-delay.html
jQuery中queue和dequeue的用法
http://chabaoo.cn/article/25481.htm
Window.setTimeout
http://chabaoo.cn/article/20741.htm
以下是我用到的一些例子。
//延遲查詢,傳一個(gè)查詢btn的ID,然后根據(jù)它附近的FORM綁定,當(dāng)FORM里面的控件被觸發(fā)或被輸入了就會(huì)500毫秒后模擬點(diǎn)擊查詢按鈕
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();
}
定義遮罩層,相隔一分鐘后關(guān)閉
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();
}
倒計(jì)時(shí)
var emailTime = 30;
function nextCanDo(){
$("#mailValidateCodeBtn").val(emailTime+"秒");
emailTime -= 1;
if(emailTime ==0 ){
$("#mailValidateCodeBtn").val("重新獲取驗(yàn)證碼");
$("#mailValidateCodeBtn").attr("disabled",false);
emailTime = 30;
}else{
setTimeout("nextCanDo()",1000);
}
}
jQuery.delay()方法簡介
http://shawphy.com/2010/11/jquery-delay.html
jQuery中queue和dequeue的用法
http://chabaoo.cn/article/25481.htm
Window.setTimeout
http://chabaoo.cn/article/20741.htm
以下是我用到的一些例子。
復(fù)制代碼 代碼如下:
//延遲查詢,傳一個(gè)查詢btn的ID,然后根據(jù)它附近的FORM綁定,當(dāng)FORM里面的控件被觸發(fā)或被輸入了就會(huì)500毫秒后模擬點(diǎn)擊查詢按鈕
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();
}
定義遮罩層,相隔一分鐘后關(guān)閉
復(fù)制代碼 代碼如下:
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();
}
倒計(jì)時(shí)
復(fù)制代碼 代碼如下:
var emailTime = 30;
function nextCanDo(){
$("#mailValidateCodeBtn").val(emailTime+"秒");
emailTime -= 1;
if(emailTime ==0 ){
$("#mailValidateCodeBtn").val("重新獲取驗(yàn)證碼");
$("#mailValidateCodeBtn").attr("disabled",false);
emailTime = 30;
}else{
setTimeout("nextCanDo()",1000);
}
}
相關(guān)文章
js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼,通過JavaScript定時(shí)函數(shù)遞歸調(diào)用實(shí)現(xiàn)折疊菜單的緩沖效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript檢測用戶是否在線的6種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)檢測用戶是否在線的6種常用方法,文中的示例代碼講解詳細(xì),感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-08-08