A timer that won't reset on refresh

Question

EDIT: How could I pass a parameter when I call Clock.start() so I could change the value of totalSeconds?

I got a counter which value I concatenate with the ID of the timer display since there would be multiple lines of timers on the page but only one would be running for every user. I want to pass the value of the timer so i know which line the timer that I should fetch is on and then I'd convert that to seconds and then finally I could assign that value to totalSeconds. Then maybe I can get this working the way I pictured every thing.

WHAT I ALREADY HAVE RUNNING: I have a timer that doesn't show that it's counting up unless I refresh. When the page loads PHP queries mySQL and calculates the elapsed time with TIMEDIFF(now(), time_log), where time_log is when the timer started.

WHAT I'D LIKE TO ADD: What I want to do is use the js/jquery snippet below to get the my TIMEDIFF and then use that as totalSeconds, so totalSeconds wont reset and continue counting up from the TIMEDIFF value.

var Clock = 
{
    totalSeconds: 0,

    start: function () {
        var self = this;

        this.interval = setInterval(function () {
          self.totalSeconds += 1;

          var ctr;
          $(".icon-play").each(function(){
              if( $(this).parent().hasClass('hide') )
                  ctr = ($(this).attr('id')).split('_');
          });

          $("#hour_" + ctr[1]).text(pad(Math.floor(self.totalSeconds/3600)));
          $("#min_" + ctr[1]).text(pad( Math.floor((self.totalSeconds/60)%60) ));
          $("#sec_" + ctr[1]).text(pad(parseInt(self.totalSeconds%60)));
        }, 1000);
    },

    pause: function () {
      clearInterval(this.interval);
      delete this.interval;
    },

    resume: function () {
      if (this.interval) this.start();
    }
};

For this script, credits to Mr. Speransky Danil. how do I pause and resume a timer?

jimp · Accepted Answer · 2012-09-24T04:20:32.837

5

Instead of recording total seconds, you should instead record the start time and calculate the number of seconds between now and when you started the timer.

Additionally, you are already storing your start time in the database, so you could initialize from that when the page loads.

If you simply count seconds, you will loose time between page refreshes.

EDIT: You can init the Clock.totalSeconds in you HTML output generated by PHP. I understand you already have this clock JS working (with markup not posted above).

<script type="text/javascript">
var Clock = {}; // your code above
Clock.totalSeconds = <?php echo (int)$seconds; ?>;
</script>

edited Sep 24 '12 at 04:20

answered Sep 24 '12 at 01:20

jimp

16,999
3
27
36

Good point. Don't know how the page refresh time didn't register to me. Maybe I'm too used to working on a local server. – Jeremy J Starcher Sep 24 '12 at 01:30
Yea, I did store those values into my database and I could fetch those just fine but I want my timer to actually move every second that's why I want to user this snippet. – esandrkwn Sep 24 '12 at 01:36
I updated my answer. Just use your db info instead of a cookie as your start time. – jimp Sep 24 '12 at 02:16
That's exactly what I already got running right now. On refresh, the timer doesn't reset at all, it increments, but my problem is that it doesn't change since it's only PHP. Which is why I want to add a javascript/jquery side so the timer moves. With moves I meant that the 00:00:seconds part changes every second. When I mention "timer gets reset to zero", I meant the js snippet above. I want to take the PHP value and have it as the value of totalSeconds. I hope I've made myself clear enough? It's kind of tricky to explain. :) – esandrkwn Sep 24 '12 at 02:44
Yes, I misunderstood, but I now understand this question to be about how to init Clock.totalSeconds. – jimp Sep 24 '12 at 04:16
If I do this Clock.totalSeconds = ; should I remove this? totalSeconds: 0, ? and if I did wouldn't that return an error looking for that variable? Can I not just assign a value for totalSeconds within Clock()? – esandrkwn Sep 24 '12 at 05:09
Leave it in the object declaration. It would return an error if you tried to access it before defining it. But JS will define properties on demand, so setting it previously undefined would be fine. – jimp Sep 24 '12 at 05:14
1

Somehow, I finally got it working. Thank you very much for expanding my understanding of objects if only a little bit, I'm still working on that part. I had no idea how to set Clock.totalSeconds and its limitations before your post. Thanks. – esandrkwn Sep 25 '12 at 01:08

score 1 · Answer 2 · answered Sep 24 '12 at 01:18

1

IF you can target modern browsers, save the totalSeconds in localStorage.
You can read totalSeconds back out of localStorage

If you have to target older browsers, then using cookies to save the value is your best shot. I'd set the cookie date so it expired fairly soon.

answered Sep 24 '12 at 01:18

Jeremy J Starcher

23,369
6
54
74

I can't use cookies because this timer would have multiple instances. One instance per user. They could login and out and the timer must continue counting up, hence why I stored the values and fetch those from the database. All I need is a way to make the timer move each second that it increments. – esandrkwn Sep 24 '12 at 01:48
Store your start time in `sessionStorage` then. That is unique per window. https://developer.mozilla.org/en-US/docs/DOM/Storage – Jeremy J Starcher Sep 24 '12 at 01:51
If I do this will my timer MOVE? Like I said on my comment I'm not having problems with fetching the time thanks to TIMEDIFF. – esandrkwn Sep 24 '12 at 02:48

A timer that won't reset on refresh

2 Answers2