javascript - 番茄钟给出负值

Question

使用 JavaScript 创建了一个番茄钟。它工作得很好，但是一旦到达休息计时器，以及之后的所有事情，它就会在几秒之间给我一个负时间。

https://jsfiddle.net/3fehu668/

JavaScript:

    $(document).ready(function(){
    var clock = $("#clock");
    var heading = $("h1");
    var breakMinus = $("#break-minus");
    var breakPlus = $("#break-plus");
    var sessionMinus = $("#session-minus");
    var sessionPlus = $("#session-plus");
    var breakTime = $("#break-time");
    var sessionTime = $("#session-time");
    var startButton = $("#start-btn");
    var resetButton = $("#reset-btn");
    var breakVal = parseInt(breakTime.val());
    var sessionVal = parseInt(sessionTime.val());

    breakMinus.on("click", function(){
        if (breakVal > 0) {
            breakVal--;
            breakTime.val(breakVal);
        }
    });

    breakPlus.on("click", function(){
        breakVal++;
        breakTime.val(breakVal);
    });

    sessionMinus.on("click", function(){
        if (sessionVal > 0) {
            sessionVal--;
            sessionTime.val(sessionVal);
        }
    });

    sessionPlus.on("click", function(){
        sessionVal++;
        sessionTime.val(sessionVal);
    });

    startButton.on("click", function(){
        if (valuesEntered()) {
            var finalTime = sessionVal * 60 + getTimeInSeconds();
            heading.html("Session running!");
            setInterval(function(){startTime(getTimeInSeconds(), finalTime)}, 1000);
        }
    });

    breakTime.on("input", function(){
        breakVal = parseInt(breakTime.val());
    });

    sessionTime.on("input", function(){
        sessionVal = parseInt(sessionTime.val());
    });

    function valuesEntered(){
        console.log("breakVal = " + breakVal);
        console.log("sessionVal = " + sessionVal);
        if (breakVal < 0 || sessionVal < 0) {
            alert("Time can't be negative! Check your inputs!");
        } else if (breakVal === 0 || sessionVal === 0){
            alert("Please enter a time for your break and session! (Time can't be 0)");
        } else {
            return true;
        }
    }

    function startTime(currentTime, finalTime){
        console.log("Setting timer...");
        setTime(currentTime, finalTime);
        if(finalTime === getTimeInSeconds()){
            alert("Time for a break!");
            heading.html("Break!");
            finalTime = breakVal * 60 + currentTime;
            clearTimer();
            setInterval(function(){startBreak(getTimeInSeconds(), finalTime)}, 1000);
        }
    }

    function clearTimer() {
        var intervalID = window.setInterval("", 9999); // get reference to last interval + 1
        clearInterval(intervalID - 1);
    }

    function startBreak(currentTime, finalTime){
        console.log("Break time...");
        setTime(currentTime, finalTime);
        if(finalTime === getTimeInSeconds()){
            alert("Back to work!");
            heading.html("Session running!");
            finalTime = sessionVal * 60 + currentTime;
            clearTimer();
            setInterval(function(){startTime(getTimeInSeconds(), finalTime)}, 1000);
        }

    }

    function setTime(currentTime, finalTime){
        console.log("Setting the time. Current Time = " + getTimeInSeconds() + ",  FinalTime = " + finalTime);
        var minutes = Math.floor((finalTime - currentTime) / 60);
        var seconds = (finalTime - currentTime) % 60;
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        clock.html(minutes  + ":" + seconds);
    }

    function getTimeInSeconds() {
        var date = new Date();
        return date.getMinutes() * 60 + date.getSeconds();
    }
});

我不会发布 HTML 和 CSS 代码，因为我认为它不相关。不过你可以在 jsfiddle 中找到它。

Answer 1

您得到负值是因为在工作计时器完成后，您的clearInterval实际上并未清除计时器。现在，您之前的计时器已设置完毕，并且 break time 也已初始化，因为两者同时运行并设置值。当 Break Timer 设置为负值时，finaltime 已达到值(value)观正在到来。

还有一件事是在 getTimeInSeconds() 中将毫秒转换为秒。假设当前时间是 15:59:40 并且您启动计时器 1 分钟，那么将会发生不同的情况。在前 20 秒内，它会运行良好，但之后您的分钟数将重置为 0，这会将您的分钟数设置为 60 您正在设置计时器1 分钟，但最终60 分钟。

相等检查条件中还有一件事

if(finalTime === getTimeInSeconds()){
}

您正在使用finalTime = sessionVal * 60 + currentTime设置finalTime，它可以工作，但您正在设置警报对话框。假设，有人在 5 秒后单击“确定”，现在您的计时器不会运行 60 秒，而是运行 55 秒，因为 5 秒已经过去了。不知道单击警报后您希望如何处理时间，是单击后开始时间还是继续进行。只是告诉。

这是您更新的 jsfiddle https://jsfiddle.net/3fehu668/3/