Question

不确定为什么会这样。当我启动计时器然后单击停止时，它不会停止。当我点击停止两次，然后停止。我尝试重新安排逻辑流程，但无法找到结论。函数stopTimer();是停止函数的函数。任何输入将不胜感激！

JS Bin：

HTML

<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick="startClock();">Start</button>
<button id="stop"  onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>

JS

var currentTime = document.getElementById('time');

var hundreths = 0;
var seconds = 0;
var minutes = 0;
var t;

function timer() {
        t = setTimeout(add, 10);
    }

function add() {
        hundreths++;
        if (hundreths > 99) {
            hundreths = 0;
            seconds++;
            if (seconds > 59) {
                seconds = 0;
                minutes++;
            }
            if (minutes >= 10) {
                seconds = 0;
                minutes = 0;
                stopTimer();

            }
        } // end if statement

        if (hundreths > 9 && seconds < 9) {
            currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
        } else if ((seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
        } else if ((seconds > 9) && (hundreths > 9)) {
            currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
        } else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
        } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
        } else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
            currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
        } else {
            currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
        }

        timer();
    } // end function add



function startClock() {

    add();
    timer();
} // end function start clock

function stopTimer() {

document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";

clearTimeout(t);   

}

function resetTimer() {
    hundreths = 0;
    seconds = 0;
    minutes = 0;

    currentTime.innerHTML = "00:00:00";
}

Answer 1

startClock调用add然后调用timer，但add已调用timer本身。（注意你的时钟速度大约是它应该的速度的两倍。）移除timer中对startClock的号召。

另请注意，setTimeout对于制作时钟不准确，并且在重复调用时会累积小错误。您可以尝试在可用时使用performance.now()（单调时钟）或new Date().getTime()（易受系统日期更改）改善，但不会像(updated JS Bin)这样：

var timeElement = document.getElementById("time");
var getTime =
    typeof performance !== "undefined" ?
        function () { return performance.now(); } :
        function () { return new Date().getTime(); };
var startTime = null;
var timer = null;

function repeat(value, count) {
    return new Array(count + 1).join(value);
}

function pad(number, width) {
    return (repeat("0", width - 1) + number).slice(-width);
}

function toTime(milliseconds) {
    return {
        minutes: milliseconds / 60000 | 0,
        seconds: (milliseconds / 1000 | 0) % 60,
        centiseconds: (milliseconds / 10 | 0) % 100,
    };
}

function formatTime(milliseconds) {
    var time = toTime(milliseconds);
    return pad(time.minutes, 2) + ":" +
           pad(time.seconds, 2) + ":" +
           pad(time.centiseconds, 2);
}

function updateTime() {
    timeElement.textContent =
        startTime === null ?
            "00:00:00" :
             formatTime(getTime() - startTime);
}

function startTimer() {
    if (startTime === null) {
        startTime = getTime();
    }

    timer = setInterval(updateTime, 10);
}

function stopTimer() {
    clearInterval(timer);
    timer = null;

    var time = toTime(milliseconds);
    resultElement.textContent =
        "Your time is " +
        time.minutes + "minutes, " +
        time.seconds + "seconds, and " +
        time.centiseconds + " hundredths";
}

function resetTimer() {
    startTime =
        timer === null ?
            null :
            getTime();

    updateTime();
}

Answer 2

将t = setInterval(add, 10);更改为t = setTimeout(add, 10);，然后在添加功能结束前注释掉timer();

定时器仅在第二次点击后停止？

2 个答案: