清除间隔不适用于javascript计时器

Question

Here is my code

 document.addEventListener("keydown", move); function move(e) { switch (e.keyCode) { case 37: x = x - speed; break; case 38: // up key pressed y = y - speed break; case 39: x = x + speed break; case 40: y = y + speed break; case 32: if (iTouched == true) { startCounter(); } break; } sendData(); } document.addEventListener("keyup", getStuff); function getStuff(e) { switch (e.keyCode) { case 32: if (iTouched == true) { shoot(); } break; } } function startCounter() { function count() { time += 1 console.log(time) } interval = setInterval(count, 100) } function shoot() { clearInterval(interval) }

The startCounter() function is triggered by a keydown event listener and the shoot() function is triggered by a keyup event listener. For some reason the setInterval will not stop when I lift the key up. The shoot() function works with other commands like an alert() just not the clearInterval(). Am I doing something wrong? Thanks!

Answer 1

Keydown fires multiple times as you hold down the key.

 var bod = document.body; bod.addEventListener("keydown", () => console.log('keydown', new Date())) bod.addEventListener("keyup", () => console.log('keyup', new Date()))

So you create more than one interval so you overwrite the last one. So you need to clear the interval before you create a new one

if (interval) clearInterval(interval)
interval = setInterval(count, 100)

or do not create one if it exists

if (!interval) {
   interval = setInterval(count, 100)
}

and when you clear it

function shoot() {
  clearInterval(interval)
  interval = null
}