js 监听窗口展示、隐藏，界面展示、不展示的事件 visibilitychange

js 监听窗口展示、隐藏，界面展示、不展示的事件 visibilitychange

最近在做一个访客界面的应用，有到访人员来之后，界面中展示一个从左到右的浮窗。 这个动画事件自然是通过 ​​setInterval​​​ 来实现的。
但现在遇到一个问题，当界面不展示的时候，interval 一直在运行，到访人员还是会一直出现，但 dom 界面不会更新，就会堆积很多人员信息在那里，当打开界面的时候，看到一坨在那。

visibilitychange 事件

如何解决呢？界面中如果有个事件能告诉我们这个界面有没有被展示就好了，确实有这个事件，就是 ​​visibilitychange​​

给界面添加这个事件

document.addEventListener('visibilitychange', event => {})

当切换标签或者最小化浏览器，总之，当这个界面不被展示时，就会触发这个事件。
但 这个 ​​​event​​ 中并不包含界面当前是被展示、还是被隐藏的信息的

这个信息在 ​​document​​ 中

let isShowing =  document.visibilityState === 'visible' // 展示的时候为 visible 隐藏的时候为 hidden

问题处理

此时就你可以通过这个信息来做处理，当界面展示的时候所有动画开始，当界面不展示的时候所有动画结束
当界面不展示的时候，应该停止所有的 ​​​setInterval​​​ 动画，不然，在再回到界面的时候，这段时间的所有 ​​interval​​ 更新，都会一性次的在界面执行，就会很卡

let intervalHandleAnimate = null // 动画 inteval 的 handle，将通过这个来结束这个 interval

function animateStart(){
  intervalHandleAnimate  = setInterval( ()=>{
    // 动画相关
  }, 60)
}

function animateStop(){
  clearInterval(intervalHandleAnimate )
}

if (isShowing){
  animateStart()
} else {
  animateStop()
}

// 或者简写成
isShowing ? animateStart() : animateStop();