zoukankan      html  css  js  c++  java
  • 如何监听浏览器当前页面是否处于活动页面(可见或未缩小)

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

    实例;

    核心方法:

        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)
      }
  • 相关阅读:
    坐标系的冷知识2
    坐标系的冷知识
    XMPP即时通讯(代码实现)
    约束问题
    实现ios屏幕的横竖屏自适应
    3D Touch ? 木有6s,也阔以玩!!!
    Autolayout
    Xcode7免证书真机调试
    微信支付
    二维码扫描
  • 原文地址:https://www.cnblogs.com/wheatCatcher/p/13214696.html
Copyright © 2011-2022 走看看