在Javascript中多次刷新后保持计时器一致

Question

我有一个倒数计时器，当我快速按 f5 时，计时器会冻结。 我猜这是因为页面在 setInterval 之前重新加载。 我正在寻找一种方法来重新加载页面，同时保持计时器运行发生的事情是页面在 setInterval 甚至可以完成之前重新加载

<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>

Answer 1

存储计时器启动时计时器应完成的时间，然后从该值中减去当前时间即可得到计时器应完成的时间。 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

Answer 2

我不确定您希望通过“快速按 F5”实现什么，但每次按下它都会重新加载页面。这是重新加载您的所有 javascript 并重新启动您的计时器。没有办法通过客户端代码重新加载页面来保持计时器运行。此外，由于 javascript 是单线程的，当页面重新加载时，您的计时器函数将被发送到堆栈，一旦处理器准备好，它将等待执行。如果您在计时器之前调用了函数，它们将首先执行。您可以通过将计时器放在服务器上并在页面加载时从客户端获取其进度来完成您尝试做的事情。由于我不知道您的后端是用什么语言编写的，因此我无法为您提供这方面的示例。