javascript - 尝试停止函数上的 Interval

Question

我正在尝试创建一个按钮，单击该按钮将启动计时器，第二次单击将停止计时器，并将“按钮”的innerHtml更改为您停止计时器的时间。然而，它不适用于我在下面编写的代码，间隔只是继续进行，似乎每次点击都会创建多个间隔。

有什么想法吗？

var active = false;
var sec = 0;
function clock(){
    if(active === false) {
        var clock = setInterval("timer()", 1000);
        active = true;
    }
    else if(active === true){
        clearInterval(clock);
        document.getElementById("button").innerHTML = "You clicked at "+sec+" seconds, try again.";
        active = false;
        sec = 0;
    }
}
function timer() {
    sec++;
    document.getElementById("button").innerHTML = sec;
}

Answer 1

您没有相同的 var Clock; 上下文，每次单击按钮时，该变量的最后一个上下文都会在下次单击时丢失，因此请像您一样将其设置为全局变量使用 var active; 并重命名为与函数名称不同的名称以避免麻烦:

js

var active = false;
var sec = 0, clck;

function clock() {
    if (active === false) {
        clck = setInterval("timer()", 1000);
        active = true;
    } else if (active === true) {
        clearInterval(clck);
        document.getElementById("button").innerHTML = "You clicked at " + sec + " seconds, try again.";
        active = false;
        sec = 0;
    }
}

function timer() {
    sec++;
    document.getElementById("button").innerHTML = sec;
}

html

<button id="button" onclick="clock()">Start Timer</button>

fiddle