使用javascript構建的計時器在刷新頁面時會重置？如何避免它？

我在我的網頁上使用了一個計時器。計時器是使用JavaScript代碼構建的。函數startTimer（）在「body onload」上調用。所以每次頁面重新加載時，函數startTimer（）都會被調用並且定時器會被重置。我們如何避免它？換句話說，只有在第一次加載主體時，我們纔可以調用該函數。以下是函數startTimer（）的代碼。使用javascript構建的計時器在刷新頁面時會重置？如何避免它？

<script type="text/javascript"> 
var running = false; 
var endTime = null; 
var timerID = null; 
function startTimer() { 
running = true; 
now = new Date(); 
now = now.getTime(); 
// change last multiple for the number of minutes 
endTime = now + (1000 * 60 * 140); 
showCountDown(); 
} 

    function showCountDown() { 
    var now = new Date(); 
    now = now.getTime(); 

    if (endTime - now == 0) { 
    //stopTimer(); 
    alert("Time is up."); 
    document.form1.submit(); 

    } else { 
    var delta = new Date(endTime - now); 

    var theMin = delta.getMinutes(); 
    var theSec = delta.getSeconds(); 
    var theTime = theMin; 
    if(theMin==59){alert("Time is up."); 
    document.form1.submit();} 
    theTime += ((theSec < 10) ? ":0" : ":") + theSec; 
    document.form1.timerDisplay.value = theTime; 
    if (running) { 
    timerID = setTimeout("showCountDown()",1000); 
    } 
    } 
    } 
    function stopTimer() { 
    clearTimeout(timerID); 
    running = false; 
    document.form1.timerDisplay.value = "0:00"; 

    } 
    </script>

函數上面被稱爲如下：

<body onload="startTimer();">

來源

2014-03-03 SuperCoder

無論何時讀取頁面，舊頁面的整個上下文都被銷燬，並創建一個全新的上下文。您無法在下一頁加載時運行一個頁面加載計時器。

如果您需要將某個狀態從一個頁面加載保存到另一個頁面，然後在下一頁加載，請檢查該狀態並確定如何設置初始頁面以匹配之前進行的操作，然後您可以保存在HTML5本地存儲或Cookie中加載頁面之間的狀態。

另一種可能是不重新加載您的頁面，而是使用ajax和javascript動態更新頁面內容。這樣你現有的計時器將繼續運行，因爲根本不會有頁面重新加載。

如果你想與你的計時器做的一切都是拿出多少時間在一些倒計時離開，你可以設置倒計時零時間到HTML5本地存儲，當重裝頁面加載，它可以檢查在本地存儲器中設置的時間，並啓動倒計時器以匹配之前設置的時間。

來源

2014-03-03 06:47:07 jfriend00

使用的cookie，或者如果HTML5然後本地/會話存儲保存的狀態。

來源

2014-03-03 06:46:55

首先像@ jfriend00說的那樣，如果你通過JavaScript創建定時器，每當頁面重新加載時，它都會重新創建定時器。

如果您使用cookie /本地存儲，它仍然可以由最終用戶刪除。

做這個功能最好的辦法是產生&店在服務器端的時候，值傳遞到在頁面加載客戶端，腳本會從服務器讀取的時間，然後開始倒計時。

來源

2014-03-03 07:01:51

使用javascript構建的計時器在刷新頁面時會重置？如何避免它？

回答

相關問題