jquery - Keeping a timer consistent after multiple refreshes in Javascript - Stack Overflow

admin管理员组

文章数量:1406178

I have a countdown timer and when ever I rapidly press f5 the timer freezes. im guessing this is because the page reloads before the setInterval. i'm looking for a way to reload the page and at the same time keep the timer running whats happening is the page reloads before the setInterval could even finish

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

I have a countdown timer and when ever I rapidly press f5 the timer freezes. im guessing this is because the page reloads before the setInterval. i'm looking for a way to reload the page and at the same time keep the timer running whats happening is the page reloads before the setInterval could even finish

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

• javascript
• jquery
• timer

Share Improve this question Follow asked Oct 13, 2015 at 10:51 ArthurArthur 9822 silver badges77 bronze badges 1

• Do you need the timer to persist between page reload?, or what is it you actually want to achieve? – Asons Commented Oct 13, 2015 at 11:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Store the time that the timer should finish when the timer starts, then just subtract the current time from that value to get the time until the timer should finish. The Date object works well for this.

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);
}

See working example here: JSFiddle

I am not sure what you are expecting to achieve by "rapidly pressing F5" but each time you press it you are reloading the page. This is reloading all of your javascript and restarting your timer. There is no way to keep a timer running through a page reload with client side code. Also, since javascript is single threaded, when the page reloads, your timer function is sent to the stack where it will wait to be executed as soon as the processor is ready for it. If you have functions called before the timer, they will be executed first. You can acplish what you are trying to do by placing your timer on the server and getting its progress from the client when the page has loaded. Since I do not know what language your back end is written in, I can't provide you with an example of this.

本文标签： jqueryKeeping a timer consistent after multiple refreshes in JavascriptStack Overflow