Javascript HTML中的计时器在第一次倒计时后不显示

这一版本的打鼹鼠已经有一段时间了。当前版本和代码如下

问题在于startGame（）函数靠近底部。它的工作原理与我每次按下按钮时console.log计时器从10开始正确倒计时相同。但是，在第一次之后，它会尝试说“Times Up”和当前计时器编号以及相同的时间

我错过了什么

打鼹鼠！
打鼹鼠！0
开始
倒数：10
const holes=document.queryselectoral（'.hole'）；
const scoreBoard=document.querySelector（'.score'）；
常量moles=document.queryselectoral（'.mole'）；
const countDown=document.getElementById（'countDown'）；
让最后一个洞；
分数=0；
函数随机时间（最小值、最大值）{
返回Math.round（Math.random（）*（max-min）+min）；
}
功能随机孔（孔）{
const idx=Math.floor（Math.random（）*holes.length）；
常数孔=孔[idx]；
如果（孔===最后一个孔）{
返回孔（孔）；
}
最后一个洞
回流孔；
}
函数peep（）{
常数时间=随机时间（2001000）；
常数孔=随机孔（孔）；
hole.classList.add（'up'）；
设置超时（（）=>{
hole.classList.remove（'up'）；
如果（！timeUp）peep（）；
}，时间）；
}
函数startName（）{
scoreBoard.innerHTML=0；
timeUp=false；
得分=0；
设定时器=10；
peep（）；
setTimeout（（）=>timeUp=true，10000）
变量超时=设置间隔（函数（）{
计时器--；
如果（计时器>0）{
倒计时.classList.remove（'timeUp'）
countDown.innerHTML=计时器；
}否则{
countDown.innerHTML=“时间到了！”；
countDown.classList.add（'timeUp'）；
返回；
}
控制台日志（计时器）；
}, 1000);
}
功能棒（e）{
如果（！e.isTrusted）返回；//不单击作弊者
分数++；
this.classList.remove（'up'）；
scoreBoard.textContent=分数；
}
moles.forEach（mole=>mole.addEventListener（'click'，bonk））；

每次调用

startGame（）

都会创建另一个间隔，但不会删除上一个间隔。您最终会同时运行多个时间间隔-一些时间间隔是完整的，而最近的一个时间间隔不是完整的，因此它们最终会发生冲突并来回更改文本

只需将

返回值

替换为

清除间隔（超时）

：

完整代码：

打鼹鼠！
打鼹鼠！0
开始
倒数：10
const holes=document.queryselectoral（'.hole'）；
const scoreBoard=document.querySelector（'.score'）；
常量moles=document.queryselectoral（'.mole'）；
const countDown=document.getElementById（'countDown'）；
让最后一个洞；
分数=0；
函数随机时间（最小值、最大值）{
返回Math.round（Math.random（）*（max-min）+min）；
}
功能随机孔（孔）{
const idx=Math.floor（Math.random（）*holes.length）；
常数孔=孔[idx]；
如果（孔===最后一个孔）{
返回孔（孔）；
}
最后一个洞
回流孔；
}
函数peep（）{
常数时间=随机时间（2001000）；
常数孔=随机孔（孔）；
hole.classList.add（'up'）；
设置超时（（）=>{
hole.classList.remove（'up'）；
如果（！timeUp）peep（）；
}，时间）；
}
函数startName（）{
scoreBoard.innerHTML=0；
timeUp=false；
得分=0；
设定时器=10；
peep（）；
setTimeout（（）=>timeUp=true，10000）
var timeOut=setInterval（函数（）{
计时器--；
如果（计时器>0）{
倒计时.classList.remove（'timeUp'）
countDown.innerHTML=计时器；
}否则{
countDown.innerHTML=“时间到了！”；
countDown.classList.add（'timeUp'）；
清除间隔（超时）；
}
控制台日志（计时器）；
}, 1000);
}
功能棒（e）{
如果（！e.isTrusted）返回；//不单击作弊者
分数++；
this.classList.remove（'up'）；
scoreBoard.textContent=分数；
}
moles.forEach（mole=>mole.addEventListener（'click'，bonk））；

这就是我喜欢使用顺序调用来设置超时的原因之一。当继续的条件失败时，不必记住超时id并取消它，只需不再调用它即可你太牛了谢谢你，泰勒

var timeOut = setInterval(function () {
  timer--;
  if (timer > 0) {
    countDown.classList.remove('timeUp')
    countDown.innerHTML = timer;
  } else {
    countDown.innerHTML = "Times up!";
    countDown.classList.add('timeUp');
    clearInterval(timeOut);
  }
  console.log(timer);
, 1000);