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

 

问题描述：

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

 

第 1 个答案：

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

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

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

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

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

 

第 2 个答案：

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

解决方案是：

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

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


这个页面中：检验相关、检查相关是两个选项卡，点击某一个，会默认按七天去接口拿数据，也就是说这个页面一打开，就需要调用数据叫下面的数据显示，我想要的效果是第一次打开会调数据拿数据，如果去其它页面再回到这个页面会就 ...