javascript - 在 Javascript 中，我在功能/重置按钮中使用 clearInterval() - 计时器重置，但继续

Question

我用 setInterval() 制作了一个计时器:

var seconds = 0, minutes = 0;
var timer = document.querySelector("#timer");
var interval = null;
function beginTimer() {
    var interval = setInterval(function(){
        timer.innerHTML = minutes + " Minute(s) " + seconds + "     Seconds";
        seconds++;
        if(seconds == 60) {
            minutes++;
            seconds = 0;
        }
        else if(minutes == 60) {
            return "Out of time!";          
        }
    }, 1000);
}

我在 HTML 中设置了一个按钮来重置它，但是当我用它来清除计时器时，它会继续运行。这是带有 clearInterval() 的函数。

function beginGame() {
cards = shuffle(cards);
for (var n = 0; n < cards.length; n++) {
    allCards.innerHTML = "";
    [].forEach.call(cards, function(item) {
        allCards.appendChild(item);
    });
    cards[n].classList.remove("match", "open", "disable", "show");
}
    //resetting values
    moves = 0;
    counter.innerHTML = moves;
    star1.style.visibility = "visible";
    star2.style.visibility = "visible";
    star3.style.visibility = "visible";
    lemon.style.visibility = "hidden";

    seconds = 0;
    minutes = 0;
    clearInterval(interval);
    var timer = document.querySelector("#timer");
    timer.innerHTML = "0 Minute(s) 0 Seconds";
}

我已经研究了几天，但没有成功...有人可以帮助我了解如何阻止计时器在重置初始化后继续运行吗？谢谢。

Answer 1

因为 beginTimer 中有 var interval，beginTimer 中的 interval 变量将始终引用 local 变量，它不同于外部 interval(永远不会被触及)。一旦 beginTimer 结束，本地 interval 变量将被垃圾收集。离开 var 改为分配给外部变量:

var interval = null;
function beginTimer() {
  interval = setInterval(function(){