javascript - 计时器在刷新时重置如何避免这种情况？

Question

这是我的java脚本代码，它在刷新时重置，如何避免这种情况

 <script>
 //define your time in second
    var c=120;
    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);



       document.getElementById("timer").innerHTML=result;


       if(c == 0 )
        {
            //setConfirmUnload(false);
            //$("#quiz_form").submit();
            window.location="result.php?td=$tid";
        }
        c = c - 1;
        t = setTimeout(function()
        {
         timedCount()
        },
        1000);
    }
</script>

Answer 1

每当读取加载页面时，旧页面的整个上下文都会被销毁，并创建一个全新的上下文。您无法让一个页面加载的计时器在下一个页面加载时运行。

如果您需要保存从一个页面加载到下一个页面的某些状态，然后在下一个页面加载中检查该状态并准确决定如何设置初始页面以匹配之前发生的情况，那么您可以保存状态HTML5 本地存储或 cookie 中的页面加载之间。

另一种可能性是不重新加载页面，而是使用 ajax 和 javascript 动态更新页面内容。这样您现有的计时器将继续运行，因为根本不会重新加载页面。

如果您想要用计时器做的只是显示倒计时还剩多少时间，您可以将倒计时零时间设置到 HTML5 本地存储中，当重新加载的页面加载时，它可以检查设置的时间本地存储并启动倒计时器以匹配之前设置的时间。

Use cookie, or if HTML5 then local/session storage to save state.

HTML

<a href="#" onclick="SaveTime()">Save Current Time</a> | 
<a href="#" onclick="retrieveTime()">Retrieve Saved Time</a>

<div id="result"></div>  

JAVASCRIPT

function SaveTime(){
var date = new Date();
var timeObj = { sec:date.getSeconds(), min:date.getMinutes(), hr:date.getHours() };
localStorage.setItem("timeObj", JSON.stringify(timeObj));
$('#result').append(JSON.stringify(timeObj)+' -- > Saved<br />' );
}

function retrieveTime(){
var timeObj = JSON.parse(localStorage.getItem("timeObj"));
//You have the time with you now
//You have the time with you now
$('#result').append(timeObj.hr+':'+timeObj.min+':'+timeObj.sec+' --> Retrieved<br />');
}

这只是一个在单击时将计时器保存在本地存储中的基本示例。修改一下，定时调用timer中的javascript函数。