监控浏览器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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读