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

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，将通过这个来结束这个 intervalfunction animateStart(){ intervalHandleAnimate = setInterval( ()=>{ // 动画相关 }, 60)}function animateStop(){ clearInterval(intervalHandleAnimate )}if (isShowing){ animateStart()} else { animateStop()}// 或者简写成isShowing ? animateStart() : animateStop();

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。