在 javascript 中使用 setInterval 函数制作计时器但在 Javascript 中遇到问题

Question

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

我制作了一个设置按钮和一个删除按钮，它们将 set/delete 按下时的间隔。

这是我的代码：

    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>

在 javascript 中使用 setInterval 函数制作计时器但在 Javascript 中遇到问题

Making a timer using setInterval function in javascript but haveing problem with it in Javascript

html

javascript

button

setinterval