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

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

 

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

示例代码如下：

  <script>

        let timer = setInterval(() => {
            console.log("开始自动刷新(每5秒获取数据)...", new Date())
        }, 5000)

        console.log("timer1:", timer)

        // 监听浏览器切换事件
        document.addEventListener('visibilitychange', () => {
            // 离开当前tab标签(不管是切到其它tab，还是最小化)
            if (document.visibilityState === 'hidden') {
                console.log("离开当前tab:停止自动刷新,clear timer:", timer)
                clearInterval(timer)
                timer = -1
            } else {
                // 回到当前tab标签
                console.log("回到当前tab:")
                //延时2秒后，恢复自动刷新
                setTimeout(() => {
                    //判断上1次的timer是否已被清除
                    if (timer < 0) {
                        timer = setInterval(() => {
                            console.log("恢复自动刷新(每5秒获取数据)...", new Date())
                        }, 5000)
                        console.log("timer2:", timer)
                    }
                }, 2000)
            }
        });
    </script>