javascript - 为什么一直设置新的间隔时间间隔会越来越快

Question

我正在做一个非常简单的计时器，它有两个按钮:stop 和 set。

代码如下:

   <h1>0</h1>
   <button onclick = 'set()'>Set</button>
   <button onclick = 'stop()'>Stop</button>

     var click = false;
        let interval
    function set(){
        interval = setInterval(function(){
    document.querySelector('h1').textContent = parseFloat(document.querySelector('h1').textContent)+1
        },1000)
    }
    function stop(){
        window.clearInterval(interval)
    }

我发现如果一直按set按钮设置新的间隔，h1加1的速度会越来越快(快多了超过 1000 毫秒)。

我知道我可以将两个按钮集中到一个按钮上，或者让设置按钮变成display: none或者使用其他方式来防止这种情况。

但我只是想知道为什么会这样。

有人可以向我解释一下为什么会这样吗？

感谢任何回复？

Answer 1

那是因为你没有在你的 set 函数上清除之前的间隔(只是重新分配它)，所以如果你点击 set 三次，你正在运行三个间隔.

正确的代码应该是:

function set(){
  clearInterval(interval);

  interval = setInterval(function(){
    document.querySelector('h1').textContent = parseFloat(document.querySelector('h1').textContent)+1
  }, 1000)
}