clearInterval 不起作用并增加间隔速度

clearInterval doesn't works and increases interval speed

我正在制作一款包含计时器的二十一点游戏。如果玩家决定抽一张新牌,计时器应该重新启动。当我按下绘制按钮时,它确实会重置,但间隔速度会增加 1。

const createCountDown = (isPlayerDrawed = false) => {
  delay = 10;
  let Timer = document.getElementById('timer');
  if (isPlayerDrawed == true) {
    delay = 10;
    clearInterval(timer);
    createCountDown(false);
  } else {
    let timer = setInterval(() => {
      if (delay <= 0) {
        clearInterval(timer);
        stay();
      } else {
        delay--;
        Timer.innerHTML = delay;
      }
    }, 1000)
    console.log(timer)
  }
}

我该如何解决这个问题?

const createCountDown = (isPlayerDrawed = false, delay) => {
counter = delay;
let Timer = document.getElementById('timer');
let interval = null
if (isPlayerDrawed === true) {
    clearInterval(interval);
} else {
    interval = setInterval(() => {
        Timer.innerHTML = counter;

        if (counter <= 0) {
            clearInterval(interval);
            stay();
        } else {
            counter--;
        }

    }, 1000)
}

}

像这样改变功能对我有用。

您的 let timer 仅适用于 else 块。其他引用将引用全局变量。

以下是让它发挥作用的方法:

let Timer = document.getElementById('timer');
const stay = () => Timer.textContent = "timer expired!";

const createCountDown = (function () {
    let delay, timer;

    function reset() {
        delay = 10;
        clearInterval(timer);
        timer = 0;
        Timer.textContent = "";
    }
    
    reset();
    
    return function () {
        reset();
        Timer.textContent = delay;
        timer = setInterval(() => {
            if (delay <= 0) {
                reset();
                stay();
            } else {
                delay--;
                Timer.textContent = delay;
            }
        }, 1000);
    }
})();
// Optionally start timer immediately:
createCountDown();

document.getElementById('draw').addEventListener("click", createCountDown);
<button id="draw">Draw</button>
<p id="timer"></p>