如何在 Javascript 中停止 10 秒计时器？

Question

当计时器达到零时，我似乎无法停止计时器。 它只会重复回到原来的时间！ 请参阅下面的我的代码。

我想要实现的是，一旦计时器为 0，它将用文本“您的时间到了”替换 00:00。

HTML：

<div class="quizTimer right">
<span>Timer:<br /><span id="qTimer"></span></span>
</div>

这是我做的 Javascript：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        console.log(display.textContent);

        if (--timer < 0) {
            timer = duration;
            clearInterval(timer); // this piece of code didnt stop the timer
        }
    }, 1000);
}

window.onload = function () {
        var oneMinute = 10 * 1,
        display = document.querySelector('#qTimer');
        startTimer(oneMinute, display);
};

Answer 1

您只需要捕获setInterval()返回的间隔 id 并使用它：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var id = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        console.log(display.textContent);

        if (--timer < 0) {
            timer = duration;
            clearInterval(id); // uses returned id
        }
    }, 1000);
}

Answer 2

clearInterval()需要对要传递的间隔的引用。

您正在传递timer ，它不是对间隔的引用 - 它是来自传入函数参数的整数。

将您的间隔分配给一个变量，并在您想要清除它时引用该变量。

let foo = setInterval(() => {
    /* code... */
    clearInterval(foo);
}, 1000);