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?

Answer 1

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>