如何监听浏览器当前页面是否处于活动页面（可见或未缩小）

Posted 2020-12-13 wheatcatcher

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

实例;

核心方法：

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