计数器归零或复位后的清零间隔

Question

我正在尝试制作简单的游戏，但在管理计数器和在计数器达到 0 或单击重置按钮后清除间隔时遇到问题。当它达到 0 时它会工作，但是当我尝试将它实现为重置按钮时，计数器正在重置但随后以双倍速度运行。

let counter = 60;
let healthPoints = 3;
let points = 0;

document.querySelector('.reset').addEventListener('click', resetGame);


function countTime() {
    const timer = document.querySelector('.timer');
    const countTime = setInterval(function () {
        counter--;
        timer.innerHTML = + counter;
        if (counter == 0) {
            alert('Game over')
            clearInterval(countTime);
        }
    }, 1000)
}

function resetGame() {
    newBoard();
    counter = 60;
    healthPoints = 4;
    points = 0;
    clearInterval(countTime);
}

Answer 1

setInterval returns 当您想停止计时器时传递给 clearInterval() 的值。您需要将其保存在 resetGame() 可以看到的范围内。您在 countTime() 内声明，这意味着它仅在此处的范围内。

这里我将其命名为 interval 并将其定义在两个函数之外，以便两个函数都可以访问它：

let counter = 60;
let healthPoints = 3;
let points = 0;
let interval;

document.querySelector('.reset').addEventListener('click', resetGame);


function countTime() {
    const timer = document.querySelector('.timer');
    interval = setInterval(function () {
        counter--;
        timer.innerHTML = + counter;
        if (counter == 0) {
            alert('Game over')
            clearInterval(interval);
        }
    }, 1000)
}

function resetGame() {
    counter = 60;
    healthPoints = 4;
    points = 0;
    clearInterval(interval);
    countTime()
}

countTime()

<button class="reset">Reset</button>
<div class = "timer"></div>

Answer 2

因为你并没有真正清除间隔，你必须提供给clearInterval函数，它需要一个间隔id才能知道清除哪个间隔。参见 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

这个id实际上是调用setInterval函数时返回的，所以你的countTime变量就是你的interval ID。

这就是为什么当它达到零时它起作用的原因是你通过将它的 id 提供给 clearInterval 函数来正确地清除间隔，相反你只是在你的 resetGame 函数中提供对 clearInterval 函数的函数引用

因此，您实际上可以从 countTime 返回 intervalId 并将其提供给您的 resetGame 函数：

function countTime() {
    ...
    const timer = document.querySelector('.timer');
    // I renamed it just to be clear
    const countTimeIntervalID = setInterval(function () {
    counter--;
    timer.innerHTML = + counter;
    if (counter == 0) {
        alert('Game over')
        clearInterval(countTime);
    }
 }, 1000)
   return countTimeIntervalID
}
let countTimeIntervalID = countTime();
function resetGame() {
     ...
    clearInterval(countTimeIntervalID);
}

另外，请注意，当您点击重置按钮时，计数器时间加倍的原因是因为您没有清除第一个，它仍然是运行，所以实际上有间隔运行并更新相同的 .timer dom 元素

Answer 3

您传递给 resetGame 函数内的 clearInterval 函数的 countTime 参数是对名为 countTime 的函数的引用。您需要重命名变量并在全局声明它：

let counter = 60;
let healthPoints = 3;
let points = 0;
let t = null;
document.querySelector('.reset').addEventListener('click', resetGame);
function countTime() {
    const timer = document.querySelector('.timer');
    t = setInterval(function () {
    counter--;
    timer.innerHTML = + counter; 
    if (counter == 0) {
      alert('Game over')     
      clearInterval(t);
    }
   }, 1000)
 }

function resetGame() {
  newBoard();
  counter = 60;
  healthPoints = 4;
  points = 0;
  clearInterval(t);
}

计数器归零或复位后的清零间隔

clearing interval after counter reach 0 or reset

javascript

setinterval

clearinterval