JavaScript Timer Pause

Question

The code is below. How would you set a button to pause the timer and resume when pressing resume? The // marks below are where I'm placing my pause and resume tags. Thank you for all of your help!!

<head>
<script type="text/javascript">

var d1 = new Date();
d1.setHours(1,0,0);

function f(){
var h= d1.getHours();
var m= d1.getMinutes();
var s=d1.getSeconds();
m= (m<10)?"0"+m: m;
s= (s<10)? "0"+s : s;

var el= document.getElementById("inputid");
el.value= h+":"+m+":"+s;
d1.setSeconds(d1.getSeconds()-1);
if( h==0 && m==0 && s==0 ) clearTimeout(t)
var t= setTimeout("f()",1000);
}

</script>
</head>
<body>
<form><input type="text" id="inputid"></form>
<script type="text/javascript">f()</script>

//pause and resume buttons would go here.
</body>

Jamiec · Accepted Answer · 2012-07-19T14:55:33.013

1

You can stop a timeout with clearTimeout() passing it the return from setTimeout or, in your case t.

Live example: http://jsfiddle.net/tJWmH/

Another pointer: dont pass a string to setTimeout, instead pass a function reference, so:

var t = setTimeout(f,1000)

in place of

var t = setTimeout("f()",1000);

if you're wondering why, search for "eval is evil".

edited Jul 19 '12 at 14:55

answered Jul 19 '12 at 14:50

Jamiec

133,658
13
134
193

hvgotcodes · Answer 2 · 2012-07-19T15:01:03.617

1

Another approach is: when the buttons is pressed, set a variable like paused. In your f function, if paused is true, simply return immediately.

setInterval(function(){
  if (paused) return;
  // update the dom
}, 1000);

input

<input type="button" value="Pause" onClick="window.paused=true" />

Here is a basic fiddle

edited Jul 19 '12 at 15:01

answered Jul 19 '12 at 14:50

hvgotcodes

118,147
33
203
236

1

the resume button sets `paused=false` – hvgotcodes Jul 19 '12 at 14:54
Think you'd need to change this to a `setInterval` otherwise the function wont be rescheduled if you pause. – Jamiec Jul 19 '12 at 14:57
No, setTimeout is also ok, he clears the timeout only if the counter reaches zero (there also needs to be an else branch). So that is ok. See my answer to your question! – Angel Jul 19 '12 at 15:07

score 1 · Answer 3 · edited May 23 '17 at 10:09

This is not my code. I found it and use in my projects. Here's the original post: https://stackoverflow.com/a/3969760/1250044

Timer = function(callback, delay) {
  var timerId, start, remaining = delay;

  this.pause = function() {
    window.clearTimeout(timerId);
    remaining -= new Date() - start;
  };

  this.resume = function() {
    start = new Date();
    timerId = window.setTimeout(callback, remaining);
  };

  this.resume();
};

use:

var t = new Timer(function(){
 /* ... */
}, 500);

t.pause();
t.resume();

Angel · Answer 4 · 2012-07-19T15:17:48.270

Try this:

var d1 = new Date();
d1.setHours(1,0,0);
var t;


function f() {
    var h= d1.getHours();
    var m= d1.getMinutes();
    var s=d1.getSeconds();
    m= (m < 10) ? ('0'+m) : m;
    s= (s < 10) ? ('0'+s) : s;

    var el= document.getElementById("inputid");
    el.value = h+":"+m+":"+s;

    if( h==0 && m==0 && s==0 ) {
        clearTimeout(t)
        return;   
    }
    d1.setSeconds(d1.getSeconds()-1);

    t= setTimeout(f,1000);

}

function pause() {
    clearTimeout(t);
}
function resume() {
    t= setTimeout(f,1000);
}
resume();

You just call pause() to pause it, and resume() to resume it. That's it! Notice that I am calling resume() once, just to start the counter.

EDIT: You must check if it reached zero before decrementing, and return so that pressing resume won't continue to work.

JavaScript Timer Pause

4 Answers4

Linked