Geek Answers Handbook

How to pause and resume the timer?

I got this function that starts a timer in this format 00:00:00 whenever I press a button. But I do not know how to perform the functions of resume and pause. I found some snippets that I thought might be useful, but I couldn't get them to work. I am new to using objects in js.

function clock() { var pauseObj = new Object(); var totalSeconds = 0; var delay = setInterval(setTime, 1000); function setTime() { var ctr; $(".icon-play").each(function () { if ($(this).parent().hasClass('hide')) ctr = ($(this).attr('id')).split('_'); }); ++totalSeconds; $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds / 3600))); $("#min_" + ctr[1]).text(pad(Math.floor((totalSeconds / 60) % 60))); $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds % 60))); } }

pad () just adds leading zeros

+7
source share
4 answers

I think it would be better if you create a clock object. See Code (see Demo: http://jsfiddle.net/f9X6J/ ):

 var Clock = { totalSeconds: 0, start: function () { var self = this; this.interval = setInterval(function () { self.totalSeconds += 1; $("#hour").text(Math.floor(self.totalSeconds / 3600)); $("#min").text(Math.floor(self.totalSeconds / 60 % 60)); $("#sec").text(parseInt(self.totalSeconds % 60)); }, 1000); }, pause: function () { clearInterval(this.interval); delete this.interval; }, resume: function () { if (!this.interval) this.start(); } }; Clock.start(); $('#pauseButton').click(function () { Clock.pause(); }); $('#resumeButton').click(function () { Clock.resume(); });
+18
source

Just clearing the interval will not work, because totalSeconds will not increase. I would set a flag indicating whether time is paused or not.

This flag will simply be set when pause () or unset on resume () is called. I separated totalSeconds before the tick timeout, which will always work even when it is paused (so that we can track the time when we resume).

Thus, the checkmark function only updates the time if the clock does not pause.

 function clock() { var pauseObj = new Object(); var totalSeconds = 0; var isPaused = false; var delay = setInterval(tick, 1000); function pause() { isPaused = true; } function resume() { isPaused = false; } function setTime() { var ctr; $(".icon-play").each(function(){ if( $(this).parent().hasClass('hide') ) ctr = ($(this).attr('id')).split('_'); }); $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds/3600))); $("#min_" + ctr[1]).text(pad( Math.floor((totalSeconds/60)%60))); $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds%60))); } function tick() { ++totalSeconds; if (!isPaused) setTime(); } }
+1
source

Use window.clearInterval to undo the repeat action that was configured with setInterval() .

 clearInterval(delay);
0
source 
  <html> <head><title>Timer</title> <script> //Evaluate the expression at the specified interval using setInterval() var a = setInterval(function(){disp()},1000); //Write the display() for timer function disp() { var x = new Date(); //locale is used to return the Date object as string x= x.toLocaleTimeString(); //Get the element by ID in disp() document.getElementById("x").innerHTML=x; } function stop() { //clearInterval() is used to pause the timer clearInterval(a); } function start() { //setInterval() is used to resume the timer a=setInterval(function(){disp()},1000); } </script> </head> <body> <p id = "x"></p> <button onclick = "stop()"> Pause </button> <button onclick = "start()"> Resume </button> </body> </html>
0
source

More articles:


All Articles