js 添加了setInterval定时器，切换页面浏览器会影响定时器，怎么解决？

Question

定时器限定5分钟内每5s刷新接口，5分钟后关闭定时器，但是在浏览器切换页面的时候时间会错乱，有时候隔1分钟才刷新一次，而且超时了还没关闭定时器。
请教一下这种情况怎么处理，关键是要解决超时还没关闭这个问题。

Answer 1

这个问题可以借参考之前社区的一个类似问题中 @Meathill 大佬的回答

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

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

大概改动思路是，开始计时器是记录一下开始时间，用户返回时会触发 visibilitychange，重新获取一下当前系统时间，判断是否超过 5 分钟。如果超过则直接使用 clearInterval 清理掉定时器。

至于用户离开页面时数据是否按时更新了并不重要，如果业务一定需要，可以在用户返回页面时请求一下数据接口。

相关链接

visibilitychange - Web API 接口参考 | MDN

Answer 2

使用这个js就ok：https://github.com/myonov/momentum/blob/master/momentum.js

Answer 3

你的问题是浏览器的后台标签页或者最小化窗口的 JS 定时器被延迟执行才会出现你这样的情况，这是浏览器为了节省 CPU 资源和电池寿命的机制
解决这个问题你可以用 Web Workers或者用下面的方法

let startTime = Date.now();
let intervalId = setInterval(() => {
  let elapsed = Date.now() - startTime;
  if (elapsed > 5 * 60 * 1000) { // 5 minutes
    clearInterval(intervalId);
  } else {
    refreshApi();
  }
}, 5000);