在Javascript中多次刷新後保持計時器一致

我有一個倒計時器，當我快速按f5時，計時器凍結。我猜這是因爲頁面在setInterval之前重新加載。我正在尋找一種方式來重新加載頁面，並在同一時間保持定時器運行發生了什麼是setInterval的之前頁面重新加載，甚至可以完成在Javascript中多次刷新後保持計時器一致

<h3 style="color:#000000" align="center"> 
     Time Remaining : <span id='timer'></span> 
     </h3> 

<script type="text/javascript" src="jquery-1.11.3.min.js"></script> 
<script> 

//define your time in second 
    var c = localStorage.getItem("timer"); 
    if(c == null)c = 3600; 

    var t; 
    timedCount(); 

    function timedCount() 
    { 

     var hours = parseInt(c/3600) % 24; 
     var minutes = parseInt(c/60) % 60; 
     var seconds = c % 60; 

     var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes <  10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); 


     $('#timer').html(result); 
     if(c == 0) 
     { 
      //setConfirmUnload(false); 
      //$("#quiz_form").submit(); 
      window.location="logout.html"; 
     } 
     c = c - 1; 
     localStorage.setItem("timer", c); 
     t = setTimeout(function() 
     { 
      timedCount() 
     },1000); 


    } 


</script>

來源

2015-10-13 Arthur

你需要的計時器頁面重載？或者是什麼你真的想達到與堅持？ – LGSon

我不知道你期望達到什麼通過「快速按F5」，但每次你按下它，你正在重新加載頁面。這是重新加載所有的JavaScript，並重新啓動你的計時器。沒有辦法通過使用客戶端代碼重新加載頁面來保持計時器運行。另外，由於javascript是單線程的，所以當頁面重新加載時，你的定時器函數會被髮送到堆棧，等待處理器準備就緒後它會立即執行。如果你有在定時器之前調用的函數，它們將首先被執行。您可以通過將計時器放置在服務器上並在加載頁面時從客戶端獲取進度，從而完成您正在嘗試執行的操作。由於我不知道你的後端是用什麼語言編寫的，所以我無法爲你提供這方面的例子。

來源

2015-10-13 11:05:49 buzzsaw

我沒有試圖通過快速按F5來實現任何事情，我正在做一個測驗應用程序，並通過頁面計時器是一致的，但通過快速重新加載頁面它凍結了計時器。我只是想知道是否有解決辦法，因爲用戶可以欺騙時間。 – Arthur

不，在客戶端沒有辦法。但是，通過將計時器放在服務器上，他們將無法阻止其進展。它只會給頁面上的印象，當頁面重新加載時計時器凍結，但實際上它將在您的服務器上穩定運行。 – buzzsaw

好吧，那麼我怎麼能夠把時間放在服務器上呢？即時通訊使用PHP – Arthur

存儲定時器啓動時計時器應該完成的時間，然後從該值中減去當前時間以獲得計時器應該完成的時間。對象Date適用於此。

HTML

<p id="display">Time Left<p> 
<button id="start">Start</button>

的Javascript

var start = document.getElementById("start"); 
var dis = document.getElementById("display"); 
var finishTime; 
var timerLength = 10; 
var timeoutID; 
dis.innerHTML = "Time Left: " + timerLength; 

if(localStorage.getItem('myTime')){ 
    Update(); 
} 
start.onclick = function() { 
    localStorage.setItem('myTime', ((new Date()).getTime() + timerLength * 1000)); 
    if (timeoutID != undefined) window.clearTimeout(timeoutID); 
    Update(); 
} 

function Update() { 
    finishTime = localStorage.getItem('myTime'); 
    var timeLeft = (finishTime - new Date()); 
    dis.innerHTML = "Time Left: " + Math.max(timeLeft/1000,0); 
    timeoutID = window.setTimeout(Update, 100); 
}

看到這裏的工作例如：JSFiddle

來源

2015-10-13 12:58:22

這是我試圖達到的一個很好的例子，但問題是用戶可以改變計算機的時間向前或向後延長或縮短時間 – Arthur

不幸的是，在客戶端計算的任何東西總是能夠被規避。你只能讓它變得更難。他們還可以通過瀏覽器控制檯設置本地存儲變量，所以他們甚至不需要更改時鐘來作弊。最安全的方法是使用服務器端代碼，例如php或python。如果你真的需要保持這個Javascript，你可以考慮讓你的代碼儘可能模糊（很難讓他們知道如何作弊），並且可能存儲每次檢查時的最新時間，如果時鐘倒退，你知道它們是作弊。 –

好的，謝謝你的提示 – Arthur

在Javascript中多次刷新後保持計時器一致

回答

相關問題