javascript - 我怎样才能让这个 JavaScript 定时器正常工作？

Question

我正在尝试使用 JavaScript 制作一个计时器。问题是，我无法让计时器在达到 0 时停止。我尝试过使用 return 和 if 语句，但似乎没有任何效果。我走在正确的道路上吗？或者有更好的方法吗？

<input type="text" id="minutes" style="width:30px;text-align:center" maxlength="2" placeholder="00">
<span>:</span>
<input type="text" id="seconds" style="width:30px;text-align:center" maxlength="2" placeholder="00">
<button onclick="timer()">Set</button>

<script>
//This prototype correctly uses the modulus function when dealing with negative numbers.
Number.prototype.mod = function (m) {
    return ((this % m) + m) % m
}

function timer() {
    var minutes = document.getElementById('minutes').value //Value of minutes box.
    var seconds = document.getElementById('seconds').value //Value of seconds box.
    var initial = seconds * 1000 //Amount of seconds (converted to milliseconds) initially set.
    var milliseconds = (minutes * 60000) + (seconds * 1000) //Total amount of milliseconds set.

    setTimeout(function () {
        alert("Time's up!")
    }, milliseconds) //Display a message when the set time is up.

    /*\Decreases the minute by one after the initially set amount of seconds have passed.
    |*|Then, clears the interval and sets a new one to decrease the minute every 60 seconds.
    \*/
    test = setInterval(function () {
        minutes--;
        document.getElementById('minutes').value = minutes;
        clearInterval(test)
        setInterval(function () {
            minutes--;
            document.getElementById('minutes').value = minutes
        }, 60000)
    }, initial)

    //Seconds are set to decrease by one every 1000 milliseconds, then be displayed in the seconds box.
    setInterval(function () {
        seconds--;
        document.getElementById('seconds').value = seconds.mod(60)
    }, 1000)
}

Answer 1

当您只需要一个时，您有四个不同的计时器函数(setTimer 和两个 setIntervals)。 JSFiddle

function timer() {
    var minutes = document.getElementById('minutes').value //Value of minutes box.
    var seconds = document.getElementById('seconds').value //Value of seconds box.
    var intervalTimer = setInterval(function () {
        seconds--;
        if (seconds < 0) {
            seconds = 59;
            minutes--;
        }
        document.getElementById('minutes').value = minutes;
        document.getElementById('seconds').value = seconds;
        if (minutes == 0 && seconds == 0) {
            alert("Time's up!");
            clearInterval(intervalTimer);
        }
    }, 1000);
}

一般来说，您需要确保为每个 setInterval 指定一个名称 (var x = setInterval...) 并稍后清除 (clearInterval( x))。如果您确实出于某种原因想要这样做，您可以拥有单独的计时器(一个用于在给定秒数之后开始的分钟，然后每 60 秒重复一次，一个用于秒数，另一个用于显示消息)，只要您清除所有计时器一旦倒计时达到零，间隔计时器的数量。

但是，使用两个计时器可能是有意义的。这将确保时间到消息确实在应该出现的时候出现，即使间隔计时器中有任何不精确之处。

function timer() {
    var minutes = document.getElementById('minutes').value,
        seconds = document.getElementById('seconds').value,
        intervalTimer = setInterval(function () {
        seconds--;
        if (seconds < 0) {
            seconds = 59;
            minutes--;
        }
        document.getElementById('minutes').value = minutes;
        document.getElementById('seconds').value = seconds;
    }, 1000);
    setTimer(function () {
        alert("Time's up!");
        clearInterval(intervalTimer);
    }, minutes * 60000 + seconds * 1000);
}