我寫了一段倒計時功能的代碼,同時實時把倒計時信息存入localstorage中,防止頁面刷新后倒計時丟失,但現(xiàn)在有個問題,如果我頁面一加載 window.onload就立馬執(zhí)行countDown()
這個方法是沒有問題就算刷新也可以正常執(zhí)行的。
但是當countDown()
是通過其他事件執(zhí)行再來觸發(fā)它的,而不是頁面一加載進來就執(zhí)行,那么當我刷新頁面后 countDown()
這個方法便不會自動執(zhí)行,也就執(zhí)行不到里面的localstorage方法,那么刷新頁面后倒計時就會停止了,我應該怎么來修改這段代碼??把localstorage方法多帶帶寫出來暴露到最外面?讓他即使是通過其他方法觸發(fā)后刷新頁面也能正常運行??請問該怎么寫?謝謝了!
/*** [countDown description] 倒計時功能 防止頁面刷新中斷* @params obj:觸發(fā)按鈕$(".btn");* @params deText:按鈕未觸發(fā)時的原始文本text();默認“獲取驗證碼”;* @params delay:倒計時秒數(shù);* @params callback:回調(diào)函數(shù),執(zhí)行函數(shù)內(nèi)部代碼最終返回true或false,默認為true;當為true時觸發(fā)事件、false時停止執(zhí)行;**/ var countDown = function (params) { params = params || {}; var obj = params.obj; var deText = params.deText || "獲取驗證碼"; var delay = params.delay || 60; var callback = params.callback || function () {return true;};function downProcess(obj, delay) { obj.text("重新發(fā)送(" + delay + "s)").attr("disabled", true); var timer = setInterval(function () { if (delay > 1) { delay--; obj.text("重新發(fā)送(" + delay + "s)"); setLocalDelay(delay); } else { clearInterval(timer); obj.text(deText).removeAttr("disabled"); } }, 1000); }//設置 localStorage function setLocalDelay(delay) { //location.href作為頁面的唯一標識,可能一個項目中會有很多頁面需要獲取驗證碼。 localStorage.setItem("delay_" + location.href, delay); //保存倒計時余下時間 localStorage.setItem("time_" + location.href, new Date().getTime()); //當前時間 }//獲取 localStorage function getLocalDelay() { return LocalDelay = { delay: localStorage.getItem("delay_" + location.href), //獲取儲存的余下時間 time: localStorage.getItem("time_" + location.href) //獲取儲存的"當前時間" }; }//頁面刷新后繼續(xù)倒計時 var LocalDelay = getLocalDelay(); var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000); if (timeLine <= LocalDelay.delay) { var newDelay = LocalDelay.delay - timeLine; downProcess(obj, newDelay); }//點擊obj 如果callback返回true則觸發(fā)事件 obj.click(function () { if (callback()) { if (obj.text() == deText) { setLocalDelay(delay); downProcess(obj, delay); } else { return false; } } }); };
調(diào)用方法
countDown({ obj: $(".get_captcha"), deText: "獲取驗證碼", delay: 60, callback:function(){ var phNum=$("#phone_number").val(); var reg=/^1(3|4|5|7|8)d{9}$/; if (!reg.test(phNum)) { $("#phone_number").focus().blur(); return false; } // $.ajax({ // ..., // success:function(){ // ... return true; // }, // .... // }); } });