继续清除 setIntervall 而不是重置它

Question

编辑和更新：作为参考，我只用 1 个计时器和一个秒到时间转换器重写了整个内容。非常干净，不太复杂。以下是完整代码：http://pastebin.com/Hb6cBryL

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

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

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

我可能以非常错误的方式实现了这一点，所以我想征求您的意见。我的一个想法是继续 inverval 但避免更新页面上的变量和文本，以便分钟/秒保持同步

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

要清除，请在obj.o_id 上使用window.clearTimeout 以及为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?