如何监听浏览器当前页面是否处于活动页面(可见或最小化窗口)

背景:主要是考虑到定时器触发浪费接口调用,造成资源浪费

实例;

核心方法:

    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)
  }

 

posted @ 2020-06-30 16:54  桥南小院  阅读(1320)  评论(0编辑  收藏  举报