能否创建在断点暂停时自动暂停的JavaScript计时器？

你用requestAnimationFrame结合时间戳判断替代setTimeout/setInterval的思路没问题，但断点暂停时系统时间（Date.now()）会持续推进，这确实会打乱你的时间差判断逻辑。下面是可行的解决方案：

核心方案：用performance.now()替代Date.now() #

performance.now()返回的是相对于页面加载的高精度时间戳，它的关键特性是：当页面处于暂停状态（比如断点调试、页面切后台）时，这个计时器会停止计数，而系统时间（Date.now()）不受影响。

举个实现X秒无操作触发回退的示例：

let lastActiveTime = performance.now();
const INACTIVE_THRESHOLD = 5000; // 5秒无操作触发回退

function checkInactive() {
  const currentTime = performance.now();
  // 断点暂停时currentTime不会增加，差值不会超过阈值
  if (currentTime - lastActiveTime >= INACTIVE_THRESHOLD) {
    // 执行回退操作
    console.log("触发回退");
    // 按需重置计时
    lastActiveTime = performance.now();
  }
  requestAnimationFrame(checkInactive);
}

// 监听用户交互，更新活跃时间戳
document.addEventListener("mousemove", () => {
  lastActiveTime = performance.now();
});
document.addEventListener("keydown", () => {
  lastActiveTime = performance.now();
});

// 启动检查逻辑
checkInactive();

方案优势 #

• 断点暂停时，performance.now()的计时同步暂停，不会出现"实际暂停时长超过X秒就误触发"的问题。
• 相比Date.now()，它的精度更高（微秒级），还能避免系统时间手动调整带来的干扰。
• 所有现代浏览器都支持该API，无需额外兼容处理。

内容的提问来源于stack exchange，提问作者Tyler V.