在javascript中使用setInterval函数制作计时器，但在Javascript中出现问题[重复]

Question

我正在使用 JavaScript 中的setInterval 函数制作计时器。

我做了一个设置按钮和一个删除按钮，按下它时将设置/删除间隔。

这是我的代码：

    var interval;
    function sets(){
      interval = setInterval(function(){
       document.querySelector('div').textContent = 
        parseFloat(document.querySelector('div').textContent)+1; 
      },1000);
     };
    function del(){
      window.clearInterval(interval);
      document.querySelector('div').textContent = 0;
    };

    <button onclick = 'sets()'>Set</button>
    <button onclick = 'del()'>Delete</button>
    <div>0</div>

我发现当我一直按下设置按钮时，div.textContent 会随着我按下设置按钮的次数越来越快。

有谁知道为什么会发生这种情况，有没有一些方法可以避免它，而无需将两个按钮合二为一？

感谢您的帮助和回复。

Answer 1

如果interval 已分配，您可以清除之前的时间间隔

var interval;

function sets() {

  // Here you can check if the interval is assigned already
  // If assigned, use del() to clear it
  if (interval) {
    del()
  }

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

function del() {
  window.clearInterval(interval);
  document.querySelector('div').textContent = 0;
  interval = null;
};

<button onclick='sets()'>Set</button>
<button onclick='del()'>Delete</button>
<div>0</div>