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

我不确定你期望通过＆＃34;快速按下F5＆＃34;但每次按下它都会重新加载页面。这会重新加载所有的JavaScript并重新启动计时器。没有办法通过客户端代码重新加载页面来运行计时器。此外，由于javascript是单线程的，当页面重新加载时，你的定时器函数被发送到堆栈，它将在处理器准备就绪后等待执行。如果您在计时器之前调用了函数，它们将首先执行。您可以通过将计时器放在服务器上并在页面加载时从客户端获取进度来完成您要执行的操作。由于我不知道你的后端是用哪种语言写的，所以我无法为你提供一个例子。

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

2 个答案: