CODEWITHSUNDEEP
javascriptjquery
Om3ga
Om3ga

Reputation: 32823

Javascript script timer issue

I am trying to make a count down timer. I manage to make one but the problem with this is it stops when I close browser. So when user revisit my site it restart again. What I want is to keep that timer. For example, if user leaves my site at timer 22:14:09. So timer will continue. Lets say the user revisits my site after an hour so the time should be 21:14:09. How can I do that?

Here is my JS

$(function () {
var hrs, mins, secs, TimerRunning, TimerID,
    Timer = {
        init: function () {
            hrs          = 23;
            mins         = 59;
            secs         = 59;
            TimerRunning = false;
            Timer.StopTimer();
            Timer.StartTimer();
         },

         StopTimer: function () {
            if(TimerRunning)
               clearTimeout(TimerID);
            TimerRunning=false;
         },

         StartTimer: function () {
            TimerRunning = true;
            $('.timer').html(Timer.Pad(hrs) + ":" + Timer.Pad(mins) + ":" + Timer.Pad(secs));
            TimerID = self.setInterval("StartTimer()", 1000);

            if(hrs == 0 && mins == 0 && secs == 0)
               StopTimer();

            if (secs == 0) {
               mins--;
               secs = 59;
            }
            if (mins == 0) {
                hrs--;
                mins = 59;
            }
            secs--;
            setTimeout(function () { Timer.StartTimer(); }, 1000);
         },

         Pad: function (number) {
            if(number < 10)
               number = 0+""+number;
            return number;
         }

    };

Timer.init();
});

Update

DEMO

Upvotes: 0

Views: 152

Answers (3)

Bruno
Bruno

Reputation: 5822

Here is my solution for this problem.

// use hours, minutes & seconds to set time limit
var hours = 1, 
    minutes = 30, 
    seconds = 0,
    maxTime =  ( ( hours * 3600 ) + ( minutes * 60 ) + seconds ) * 1000,
    // if timeleft not in localStorage then default to maxTime
    timeLeft = ( localStorage.timeLeft || maxTime ),
    startTime = new Date(),
    intervalRef;

// check if user has already used up time
if( timeLeft > 0 ) {

    intervalRef = setInterval( setTimeLeft, 5000 );
} else {

    stopTrackingTime();
}

function setTimeLeft( ) {

    // if user has used up time exit
    if( localStorage.timeLeft < 0 ) {

        stopTrackingTime();
    }

    // calculate how long user has left
    var elapsed = ( new Date() - startTime );
    localStorage.timeLeft = timeLeft - elapsed;
};

// function called once user has used up time
function stopTrackingTime( ) {

    clearInterval( intervalRef );
    alert( "end of time allowed" );
}

Fiddle here

Upvotes: 1

Need4Steed
Need4Steed

Reputation: 2180

You could modify your StartTimer function so that every time it is called a local time stamp (new Date) be saved in cookie or localStorage. Besides, the setTimeout isn't very reliable, your should adjust the time count with real time every now and then.

Upvotes: 0

Sergi Mansilla
Sergi Mansilla

Reputation: 12793

You could store the time in LocalStorage, and it would be persistent across browser restarts.

In your case something as simple as

localStorage["mytimer"] = JSON.stringify([hrs, mins, secs]);

should work for storage, and you could do

var previousTime = JSON.parse(localStorage["mytimer"]);

to retrieve the previous value.

You could read more about it here: http://diveintohtml5.info/storage.html.

Upvotes: 0

Related Questions