码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-30 17:45:25      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:ext   定时   定时器   listen   new   hand   color   return   ons   

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

实例;

核心方法:

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

 

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

标签:ext   定时   定时器   listen   new   hand   color   return   ons   

原文地址:https://www.cnblogs.com/wheatCatcher/p/13214696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!