如何监听浏览器当前页面是否处于活动页面(可见或最小化窗口)
背景:主要是考虑到定时器触发浪费接口调用,造成资源浪费
实例;
核心方法:
getHidden () { // 判断当前页面是否处于活动状态 let prefixs = ['webkit', 'moz', 'mos', 'o'] if ('hidden' in document) { return document.hidden } for (let i = 0; i < prefixs.length; i++) { if (`${prefixs[i]}Hidden` in document) { return document[`${prefixs[i]}Hidden`] } } // not support return null },
添加与销毁监听:
document.addEventListener('visibilitychange', this.pageHiddenHandler, false) pageHiddenHandler () { // 触发定时器 let _this = this let isHidden = _this.getHidden() if (isHidden) { // console.log('暂时离开页面') _this.clearSetInterval() } else { // console.log(new Date(), '立即调用2') _this.loadData() _this.clearSetInterval() this.$nextTick(function () { _this.setInterval = setInterval(function () { // console.log(new Date(), '定时调用2') _this.loadData() }, _this.timeInterval) }) } } beforeDestroy() {// 在合适的时机销毁定时器+监听 this.clearSetInterval() document.removeEventListener('visibilitychange', this.pageHiddenHandler) }