clearInterval 不起作用并提高间隔速度

Question

Im making a blackjack game which contains a timer. Timer should restart if player decides to draw a new card. When i press draw button it does reset but increments interval speed by 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)
  }
}

How can i fix this problem ?

Answer 1

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)
}

}

changing function like this worked for me.

Answer 2

Your let timer is only scoped to the else block. Other references will refer to a global variable.

Here is how you can make it work:

 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>