How to pause/stop a timer?

Question

I have a timer, but I want to add a "STOP" button or link which it will freeze the timer. How?

HTML:

TIME LEFT: <font size="5" color='#F7D358'><span id='timer_div'></span></font>

JAVASCRIPT:

var seconds_left = 60;
var interval = setInterval(function() {
    document.getElementById('timer_div').innerHTML = --seconds_left;

    if (seconds_left <= 0)
    {
        document.getElementById('timer_div').innerHTML = '...';
        clearInterval(interval);
    }
}, 1000);

DEMO: http://jsfiddle.net/wa4ms/

score 1 · Answer 1 · answered Dec 31 '13 at 04:35

1

simply use this

<input type="button" value="STOP" onclick="clearInterval(interval);" />

answered Dec 31 '13 at 04:35

Tun Zarni Kyaw

2,099
2
21
25

You can not resume it now! Use setTimeout instead. Example is at - http://stackoverflow.com/questions/11563382/javascript-timer-pause – Kunj Dec 31 '13 at 04:45

patrick · Answer 2 · 2014-01-04T04:17:57.400

0

Here is at least an example on how to stop a running funciton (timer):

http://www.w3schools.com/js/tryit.asp?filename=tryjs_setinterval3

edited Jan 04 '14 at 04:17

answered Dec 31 '13 at 04:39

patrick

881
2
9
32

score 0 · Answer 3 · answered Dec 31 '13 at 04:45

html:

TIME LEFT: <font size="5" color='#F7D358'><span id='timer_div'></span></font>
<input type="button" value="Pause" id="timer_pause" />
<input type="button" value="Resume" id="timer_resume" />

javascript:

var seconds_left = 60, interval;
function startTimer() {
    clearInterval(interval);
    interval = setInterval(function() {
        document.getElementById('timer_div').innerHTML = --seconds_left;

        if (seconds_left <= 0)
        {
            document.getElementById('timer_div').innerHTML = '...';
            clearInterval(interval);
        }
    }, 1000);
}
document.getElementById('timer_pause').onclick = function () {
    clearInterval(interval);
};
document.getElementById('timer_resume').onclick = function () {
    startTimer();
};
startTimer();

score 0 · Answer 4 · answered Dec 31 '13 at 04:48

http://jsfiddle.net/dpeDe/

TIME LEFT: <span id='timer_div'></span>
<button></button>

<script>
var seconds_left = 60;
var interval;
var playing = false;
var b = document.getElementsByTagName("button")[0];

function tick(){
    document.getElementById('timer_div').innerHTML = --seconds_left;
    if (seconds_left <= 0){
        document.getElementById('timer_div').innerHTML = '...';
        clearInterval(interval);
    }
}

function play(){
    interval = setInterval(tick, 1000);
    b.innerHTML = "&#x25a0; stop";
}

function pause(){
    clearInterval(interval);
    b.innerHTML = "&#x25ba; play";
}

b.onclick = function(){
    playing ? pause() : play();
    playing = !playing;
};

b.click();
</script>

P.S. the <font> tag is deprecated

score 0 · Answer 5 · answered Jan 02 '14 at 16:53

I have written a delta timing script (see the gist) which allow you to easily start and stop timed events:

var span = document.querySelector("span");

var seconds = 60;

var timer = new DeltaTimer(function () {
    span.innerHTML = seconds ? seconds-- : (timer.stop(), "...");
}, 1000);

timer.start();

The above code is equivalent to your current code. Adding a stop button on top of that is very simple:

var running = true;

document.querySelector("button").addEventListener("click", function () {
    if (running) timer.stop();
    else timer.start();
    running =! running;
});

See the demo for yourself: http://jsfiddle.net/wa4ms/4/

How to pause/stop a timer?

5 Answers5