如何在生成第二个定时器后清除第一个以避免重复生成数值？

兄弟，你的问题核心在于每次点击创建的定时器ID被存在函数内部，下次点击时根本拿不到之前的ID，自然没法清除旧定时器。咱们只需要做一个小改动，把定时器ID的变量移到函数外部，让它能被每次点击的func访问到就行，具体方案如下：

修改思路 #

• 把保存定时器ID的startInterval变量提升到全局作用域（和clickValue同级），这样每次调用func时都能获取到上一次的定时器ID。
• 在创建新定时器之前，先判断是否存在未清除的旧定时器，如果有就用clearInterval干掉它，再创建新的。

修改后的完整代码 #

var clickValue = 0;
// 把定时器ID变量移到函数外部，保存上次的定时器引用
var startInterval = null; 

function func() {
  var value = 0;
  var generateValue = function() {
    value = value + 1;
    console.log('value: ' + value);
  };

  // 关键：如果之前有定时器在运行，先清除它
  if (startInterval) {
    clearInterval(startInterval);
    console.log('已清除旧定时器');
  }

  // 创建新的定时器，并更新startInterval的值
  startInterval = setInterval(generateValue, 2000);
  
  clickValue = clickValue + 1;
  console.log(clickValue + ' clicks...');
}

代码解释 #

• 当第一次点击按钮时，startInterval是null，所以不会执行清除逻辑，直接创建第一个定时器。
• 第二次及以后点击时，startInterval保存着上一次的定时器ID，会先执行clearInterval(startInterval)清除旧的定时器，然后再创建新的，这样就不会同时运行多个定时器了。
• 每次创建新定时器后，都会把新的ID赋值给startInterval，确保下次点击能拿到最新的旧ID。

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