javascript - 如何防止我的 JavaScript 计时器在页面重新加载时重新启动

Question

我的 PHP 包含文件中有此代码用于在线测验。如何阻止我的 JavaScript 计时器在页面刷新时重新启动？我对本地存储和 cookie 很陌生。请有人帮助我编写示例代码或修改我的代码。

<div class="timer">Time Remaining <span id="display"></span> minutes!</div> 

<script>
    function CountDown(duration, display) {
        if (!isNaN(duration)) {
            var timer = duration, minutes, seconds;

            var interVal=  setInterval(function () {
                minutes = parseInt(timer / 60, 10);
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                $(display).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");

                if (--timer < 0) {
                   timer = duration;
                   SubmitFunction();
                   $('#display').empty();
                   clearInterval(interVal)
                }
            },1000);
        }
    }

    function SubmitFunction(){
        window.location.href = "quizResult.php";    
    }

    CountDown(60,$('#display'));    

</script>

Answer 1

就像 @geekley 所说，您可以存储计时器最初开始的时间。实现此目的的一个简单方法是利用本地存储，您提到过对此还不太了解。

我可能会做的就是像这样设置时间:

localStorage.setItem('StartTime', Date.now())

当用户访问或加载页面时，您可以初步检查该值。因此这行代码可能会更改为:

var startTime = localStorage.getItem('StartTime')

// if startTime exists, calculate your counter like so:
// timeRemaining = (initial countdown value) - (CurrentTime - StartTime)

var timeRemaining // declare this variable and set it to whatever value you'd like as a default

if (startTime) {
    timeRemaining = timeRemaining - (Date.now() - startTime)
} else {
    localStorage.setItem('StartTime', Date.now())
}

然后，调用 CountDown 函数并传递 timeRemaining 变量作为参数。您可能需要编辑逻辑来计算毫秒到分钟，但看起来您对此有很好的掌握。我希望这有帮助!

编辑
比较 Date.now() 的实例将返回毫秒。您可以查看mozilla docs有关处理此问题的更多信息。