前端 - 页面第一次启动定时器加快，从其它页面再回来又恢复正常，请问这是什么原因？

Question

我写了一个点餐平台，其中有一个外卖订单模块，里面有四个订单计时器和倒计时，我用定时器写的，有倒计时15分钟，但是发现当第一次启动页面的时候倒计时跑的很快，差不多一秒跑两秒，当从别的模块在回到外卖订单模块倒计时又恢复正常，请问这是什么原因？

Answer 1

现在的浏览器都有一些节能设计，当你离开当前页面，它就进入低功耗状态，里面的执行速率会降低，计时器是最明显的一个。

解决方案是：

1. 记录计时器开始的时间
2. 侦听页面的 visibilitychange 事件，当用户返回的时候，校准时间

不过仔细看了你的问题，是启动的时候不正常，回来又正常了？那感觉是你代码写的有问题……

Answer 2

创建定时器之前先判断 是否已经存在定时器

let timerId; // 全局变量保存计时器 ID

function startTimer() {
  if (!timerId) { // 如果定时器不存在，则创建定时器
    timerId = setInterval(updateTimer, 1000);
  }
}

function stopTimer() {
  clearInterval(timerId); // 清除定时器
  timerId = null; // 重置全局变量
}

function updateTimer() {
  // 更新计时器的值
}