使用setInterval实现计数器，数次后间隔自动变为1秒的问题求助

你的代码出现间隔变慢的情况，主要有两个常见原因，对应修复方案如下：

1. 重复点击按钮导致多个定时器叠加 #

你的startCounter函数每次点击都会创建新的setInterval实例，但没有清除之前已存在的定时器。多次点击后，多个定时器会同时触发count函数，不仅会让计数速度异常，当其中一个定时器触发clearInterval时，只能清除最后创建的那个，之前的定时器仍会持续运行，最终导致浏览器资源占用增加，表现出间隔变慢的现象。

修复方法：在创建新定时器前，先清除已有定时器：

function startCounter(){
  clearInterval(interval); // 清除之前的定时器，避免叠加
  interval = setInterval(count, 100);
}

2. 浏览器后台标签页的定时器节流机制 #

现代浏览器为节省系统资源，当标签页处于非活跃状态（后台运行）时，会强制将setInterval的最小执行间隔限制为1000ms，这是浏览器的默认优化行为。如果你的计数器在后台标签页运行，就会出现间隔突然变慢的情况。

替代方案：用requestAnimationFrame模拟定时器，它会在标签页后台时暂停执行，回到前台后恢复，同时能更精准地控制时间间隔：

var btn = document.getElementById("btn");
var num = document.getElementById('num');
btn.addEventListener("click", startCounter);

var animationId;
var lastTime = 0;
var idx = 0;

function startCounter(){
  cancelAnimationFrame(animationId);
  lastTime = Date.now();
  idx = 0;
  animationId = requestAnimationFrame(count);
}

function count(){
  var now = Date.now();
  // 每100ms执行一次计数逻辑
  if(now - lastTime >= 100){
    idx++;
    console.log(idx);
    num.textContent = idx;
    lastTime = now;
    if(idx > 100) {
      cancelAnimationFrame(animationId);
      return;
    }
  }
  animationId = requestAnimationFrame(count);
}

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