如何暂停/停止计时器？答案

【问题标题】：How to pause/stop a timer?如何暂停/停止计时器？
【发布时间】：2013-12-31 04:29:29
【问题描述】：

我有一个计时器，但我想添加一个“停止”按钮或链接，它将冻结计时器。怎么样？

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);

演示： http://jsfiddle.net/wa4ms/

【问题讨论】：

标签： javascript button timer

【解决方案1】：

只需使用这个

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

【讨论】：

现在不能恢复！请改用 setTimeout。示例位于 - stackoverflow.com/questions/11563382/javascript-timer-pause

【解决方案2】：

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();

【讨论】：

【解决方案3】：

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>

附： <font> 标签已弃用

【讨论】：

【解决方案4】：

我编写了一个delta timing 脚本（参见gist），它可以让您轻松启动和停止定时事件：

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

var seconds = 60;

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

timer.start();

以上代码等同于您当前的代码。在上面添加一个停止按钮非常简单：

var running = true;

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

亲自观看演示：http://jsfiddle.net/wa4ms/4/

【讨论】：

【解决方案5】：

这里至少是一个关于如何停止正在运行的功能（计时器）的示例：

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

【讨论】：