Question

编辑＆amp;更新：作为参考，我只用1个定时器和第二个时间转换器重写了整个事情。非常干净，不太复杂。以下是完整代码：http://pastebin.com/Hb6cBryL

我得到了这个我用javascript构建的计时器：http://powerpoint.azurewebsites.net/

这是非常简单的代码，但是对于最终的实现，我需要能够暂停计时器并重新启动它。我使用2个setIntervalls，1表示每60秒触发的分钟数，1表示每秒触发的秒数。

当我暂停时，我清除间隔。但是当我重新启动它们时，分钟会在60秒间隔重新开始，并且不再与秒同步。

我可能以非常错误的方式实现了这一点，所以我想征求您的意见。我的想法是继续inverval但是避免更新页面上的变量和文本，以便分钟/秒保持同步＆lt;然而，这对我来说听起来不是一个理想的解决方案。欢迎所有提示：）

Js代码：

    var minutes = null, seconds = null, cnt, secs;
function settimer(frm) { if (minutes == null) { cnt = frm.timeinput.value - '1'; secs = '59';} };

function stop() {
    clearInterval(minutes);
    clearInterval(seconds);
    minutes = null;
    seconds = null;
    document.getElementById("minutes").innerHTML = '00';
    document.getElementById("seconds").innerHTML = '00';
}

function pause() {
    clearInterval(minutes);
    clearInterval(seconds);
}

function runtimer() {
    event.preventDefault();
    if (minutes == null) {
        document.getElementById("minutes").innerHTML = cnt;};
        minutes = setInterval(function () {
            if (cnt == '0') { stop() } else { cnt -= 1; document.getElementById("minutes").innerHTML = cnt; };

        }, 6000);
        if (seconds == null) { document.getElementById("seconds").innerHTML = secs; };
        seconds = setInterval(function () {
            if (secs == '0') { secs = '59' } else { secs -= 1; document.getElementById("seconds").innerHTML = secs; };
        }, 100);
    }

Answer 1

你需要以某种方式包装它们，并认识到你不能立即得到计时器的id。

function setIntervalWithOffset(fn, delay, offset) {
    var o = {id: null, o_id: null};
    o.o_id = window.setTimeout(function () {
        o.id = window.setInterval(fn, delay);
    }, offset);
    return o;
}

function setTimeoutWithOffset(fn, delay, offset) {
    var o = {id: null, o_id: null};
    o.o_id = window.setTimeout(function () {
        o.id = window.setTimeout(fn, delay);
    }, offset);
    return o;
}

要清除，请使用window.clearTimeout上的obj.o_id以及您为obj.id设置的任何类型。

您还应该考虑是否应该更好地实现 setTimeout 循环而不是使用 setInterval ，这样您就不会有级联错误的可能性

Answer 2

抱歉，我认为你的方式很糟糕。为什么要使用两个间隔来做同样的事情？间隔是异步的，您不能同步两个独立运行的间隔。

只需一个间隔即可实现这一目标。要显示秒数，您可以在每次计数器达到阈值时递增另一个变量：

var counter = 0;
var seconds = 0;
var $interval = setInterval(function(){
    counter++;
    if (counter >= 6000) {
        counter = counter - 6000;
        seconds++;
    }
, 10);

因此，停止/重启间隔会更容易。

Answer 3

你需要获得计时器的句柄，以便以后能够重置它，你可以这样做：

timeoutHandle = setTimeout(function(){/*code*/}, 1000);
clearTimeout(timeoutHandle);

看看这个jsfiddle

取自：How do I stop a window.setInterval in javascript?

继续清除setIntervall而不是重置它

3 个答案: