Javascript - 基本秒表可以多次启动，提高手表速度.解决 方案

Question

这是我们的JS代码(基本上是从其他地方复制粘贴的(，它或多或少是有效的，但是我们有一个问题，如果用户单击"开始"按钮多次，手表的速度将随着每次按钮按下而增加。

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0,
    t;
function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
    }
    h1.textContent = (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
    timer();
}
function timer() {
    t = setTimeout(add, 997.5);
}
/* Start button */
document.getElementById("start").onclick = timer;
/* Stop button */
document.getElementById("stop").onclick = function () {
    clearTimeout(t);
}
/* Clear button */
document.getElementById("clear").onclick = function () {
    h1.textContent = "00:00";
    seconds = 0; minutes = 0;
    clearTimeout(t);
}

所以是的，任何输入都会很棒。我尝试让停止函数("clearTimeout(t("(从计时器函数开始，只是为了看看这是否会在它开始之前重置它，但它不起作用。

有什么想法吗？你可能看得出来我是新手。

Answer 1

我的建议是检查秒表是否在每次启动时启动。要么取消当前的，然后开始一个新的：

function timer() {
    if (t) {
        clearTimeout(t);
    }
    t = setTimeout(add, 997.5);
}

或者，如果已经开始，则不执行任何操作：

function timer() {
    if (!t) {
        t = setTimeout(add, 997.5);
    }
}
document.getElementById("stop").onclick = function () {
    clearTimeout(t);
    t = null;
}