使用JavaScript setInterval做定时器多次点击Set按钮计时加速问题求解

问题产生原因 #

每次点击Set按钮都会触发一次setInterval调用，生成一个独立的定时器实例。你虽然把新定时器的ID赋值给了interval变量，但之前已经启动的定时器并没有被清除，依然在后台正常运行。点击多少次Set就会有多少个定时器同时工作，每个定时器每秒都会给div的数值加1，最终就会出现数值增速随点击次数变快的问题。

规避方案（无需合并按钮） #

两种方案选一种即可：

方案1：启动前先清除已有定时器 #

每次调用sets函数时，先清除之前可能存在的定时器，确保同一时间永远只有一个定时器运行，修改后的JS代码如下：

var interval;
function sets(){
  // 启动新定时器前先清掉旧的，即使没有旧定时器也不会报错
  clearInterval(interval);
  interval = setInterval(function(){
   document.querySelector('div').textContent = 
    parseFloat(document.querySelector('div').textContent)+1; 
  },1000);
 };
function del(){
  window.clearInterval(interval);
  document.querySelector('div').textContent = 0;
};

这个方案不需要修改HTML代码，逻辑简单，重复点击Set也只会保留最新的一个定时器。

方案2：加运行状态锁防止重复启动 #

通过变量记录定时器运行状态，已经在运行的情况下点击Set直接不执行新定时器创建逻辑：

var interval;
var timerRunning = false; // 定时器运行状态标记
function sets(){
  // 已经在运行就直接返回，不创建新定时器
  if(timerRunning) return;
  interval = setInterval(function(){
   document.querySelector('div').textContent = 
    parseFloat(document.querySelector('div').textContent)+1; 
  },1000);
  timerRunning = true;
 };
function del(){
  window.clearInterval(interval);
  timerRunning = false; // 清除定时器时重置状态
  document.querySelector('div').textContent = 0;
};

内容的提问来源于stack exchange，提问作者Shawn