JS监听浏览器标签页是否可见visibilitychange监听浏览器标签页进入后台或者前台的时候触发。 documen

应用场景：现在有一个等待扫码登录的登录页面，每过3秒会请求一次接口，获取用户用户信息。
如果用户打开了其他新的标签页，暂时忘记了这个登录页面，这个进入后台的标签页依旧会每3s请求一次接口，这就造成了一直请求的服务器压力（此时用户一直没有扫码）。

需求： 当前页面不显示的时候，中断请求。只有当前页面显示，才会重新启动定时器。

visibilitychange监听浏览器标签页进入后台或者前台的时候触发。
document.visibilityState返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：
- 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.
- 'hidden' : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
- 'prerender' : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
- 当此属性的值改变时, 会递交 visibilitychange (en-US) 事件给Document.

document.addEventListener("visibilitychange",function(){
  if(document.visibilityState=="visible"){
    console.log("进入前台");
  }
  if(document.visibilityState=="hidden"){
    console.log("切换到后台")
  }
})

参考自：