监控浏览器tab切换或最小化事件

背景：最近遇到1个项目，业务方调用了后端1个开销较大的接口，用于页面实时监控一些关键指标，页面是自动定时请求接口刷新数据，随着用户的增加，后端压力比较大，分析发现，很多用户日常使用过程中，并不是一直盯着屏幕看，有时候人离开了（比如下班），或者把监控页切到后台或最小化，干其它事去了，但是页面上的定时请求仍然在一直跑着，造成了相当一部分无用请求。

优化思路：当浏览器tab最小化，或切到后台时，停止自动刷新，等切回来时，再恢复自动刷新。

示例代码如下：

 1   <script>
 2
 3         let timer = setInterval(() => {
 4             console.log("开始自动刷新(每5秒获取数据)...", new Date())
 5         }, 5000)
 6
 7         console.log("timer1:", timer)
 8
 9         // 监听浏览器切换事件
10         document.addEventListener('visibilitychange', () => {
11             // 离开当前tab标签(不管是切到其它tab，还是最小化)
12             if (document.visibilityState === 'hidden') {
13                 console.log("离开当前tab:停止自动刷新,clear timer:", timer)
14                 clearInterval(timer)
15                 timer = -1
16             } else {
17                 // 回到当前tab标签
18                 console.log("回到当前tab:")
19                 //延时2秒后，恢复自动刷新
20                 setTimeout(() => {
21                     //判断上1次的timer是否已被清除
22                     if (timer < 0) {
23                         timer = setInterval(() => {
24                             console.log("恢复自动刷新(每5秒获取数据)...", new Date())
25                         }, 5000)
26                         console.log("timer2:", timer)
27                     }
28                 }, 2000)
29             }
30         });
31     </script>