JS基础：setInterval 计时不准问题

当浏览器切换到其他页面或被最小化时，由于浏览器自身的优化资源策略影响，会将非活动标签页的定时器降低优先级，因此当恢复活动状态时就可能导致 setInterval 的计时不准确。

为了解决这个问题，可以尝试以下方法来改善倒计时的准确性：
1、使用 Web Workers：将倒计时的逻辑放在 Web Worker 中运行
2、计算时间差：在页面失去焦点时记录当前时间，在页面重新获得焦点时计算时间差，然后根据时间差调整倒计时的剩余时间
3、使用精准定时器：使用原生的 requestAnimationFrame 或 递归调用setTimeout 设置更加精准的定时器
4、考虑使用第三方库：一些专门处理倒计时的 JavaScript 库可能提供更好的解决方案，可以考虑集成这些库来管理倒计时。

虽然以上方法可以改善倒计时在浏览器切换页面时的准确性，但由于浏览器安全机制和性能限制，无法完全消除这种影响。因此，在设计倒计时功能时要考虑到这些潜在问题，并选择较为合适的解决方案。

以下是一个简单的示例代码，演示了如何在页面失去焦点时记录时间，页面获得焦点时计算时间差并调整倒计时的剩余时间，从而提高倒计时的准确性

let countdown = 60; // 初始倒计时时间，单位秒
let timerId;
let startTime;
let elapsedTime = 0;

function startCountdown() {
  startTime = Date.now();
  timerId = setInterval(updateCountdown, 1000); // 每秒更新倒计时
}

function updateCountdown() {
  const currentTime = Date.now();
  const deltaTime = Math.round((currentTime - startTime + elapsedTime) / 1000); // 计算经过的秒数（考虑页面失去焦点的时间）
  const remainingTime = countdown - deltaTime;

  if (remainingTime <= 0) {
    clearInterval(timerId);
    console.log("倒计时结束");
  } else {
    console.log("剩余时间: " + remainingTime + " 秒");
  }
}

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    clearInterval(timerId); // 页面失去焦点时清除定时器
    elapsedTime += (Date.now() - startTime); // 记录页面失去焦点时的时间
  } else {
    startTime = Date.now(); // 页面重新获得焦点时更新起始时间
    timerId = setInterval(updateCountdown, 1000); // 重新设置定时器
  }
});

// 启动倒计时
startCountdown();