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返回要停止计时器时传递给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

当您调用setInterval函数时，实际上会返回此ID，因此您的countTime变量就是您的间隔ID。

这就是为什么当它达到零时它起作用的原因，是因为您通过向clearInterval函数提供其ID来正确清除间隔，而相反，您只是在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);
}

此外，请注意，单击重置按钮会使计数器时间加倍的原因是，由于您没有清除第一个计数器，因此它仍在运行，因此实际上要间隔运行并更新它。计时器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);
}

计数器达到0或重置后的清除间隔

3 个答案: