倒数计时器中的 setInterval 在第一轮后执行多次

Question

希望大家注意安全

我正在尝试使用以下代码找出一个简单的倒数计时器：

发生的事情是我第一次点击它时一切正常，按照它应该如何工作按秒数倒数。但是从第二次开始它变得“更快”，它每秒有 2 个数字。第 3 次它每秒显示 3 个数字，或者如果我一次单击它几次它也会“更快”

我假设它是因为间隔加起来（不知何故？）并且每次执行相同的代码 n* 次第二。但我不知道每次应该在哪里/如何完全清除间隔？

希望这对你们有意义提前感谢您的帮助

    function makeTimer(){
  
  document.getElementById("button-1").innerHTML = "Stop Countdown";
  timeLeft = document.getElementById("set-time").value;
 
  // buttonChange()
  document.getElementById("set-time").value = ""
    setInterval(function(){
      if(timeLeft <=0){
        clearInterval(timeLeft = 0)
      }
          document.getElementById("timer-id").innerHTML = timeLeft+"s"
          timeLeft = timeLeft - 1

    },1000)
    
}

function toggleTimer(){
  // clearInterval(timeLeft)
  button = document.getElementById("button-1")
  if(button.innerHTML ==='Click to countdown'){
    makeTimer()
  }else if(button.innerHTML=== "Stop Countdown"){
    clearInterval(timeLeft = 0)
    button.innerHTML = "Click to countdown"
  }
}

Answer 1

您使用 clearInterval 不正确。

setInterval returns 对您的计时器的引用，然后您必须将其传递给 clearInterval 以停止它。

示例：

var myTimer = setInterval(myFunction, 1000); //Starts the timer

clearInterval(myTimer); //Stops the timer

倒数计时器中的 setInterval 在第一轮后执行多次

setInterval in a countdown timer gets executed multiple times after first round

html

javascript

timer

setinterval

countdowntimer