vue定时器设置——页面未激活、路由切换进行销毁

<template>
  <div>定时器demo</div>
</template>

<script>
const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null
export default {
  data () {
    return {
      setInterval: null,
      visibilityChangeEvent: hiddenProperty.replace(/hidden/i, 'visibilitychange')
    }
  },
  created () {// 【定时拉取】:一般需要在使用时调用,而不是初始化
    this.setsetInterval()
  },
  beforeDestroy () {// 【路由销毁】:清除定时器
    console.log("路由销毁后");
    this.clearsetInterval()
    document.removeEventListener(this.visibilityChangeEvent, this.onVisibilityChange);// 先移除具名函数（匿名函数无法移除）
  },
  methods: {
    // 常规方法:
    setsetInterval () {
      let self = this
      const flag = true
      if (flag) {//触发定时器必须设置限制条件
        self.loadData() //立即激活
        document.addEventListener(this.visibilityChangeEvent, this.onVisibilityChange);// 添加页面关闭监听
        self.setInterval = setInterval(() => { // 每10秒拉取一次
          self.loadData()
        }, 3000)
      }
    },
    // 清除方法:
    clearsetInterval () {
      if (this.setInterval) {
        clearInterval(this.setInterval)
      }
    },
    onVisibilityChange () {
      let self = this
      if (!document[hiddenProperty]) {
        console.log('页面激活');
        self.loadData() //立即激活
        self.setInterval = setInterval(() => {
          self.loadData()
        }, 3000)
      } else {// 关闭窗口自动清除定时器
        console.log('页面未激活');
        self.clearsetInterval()
      }
    },
    loadData () {
      console.log("调用接口");
    }
  }
}
</script>

备注：如果无页面激活问题，也可以在设置定时器时，直接设置销毁

this.setInterval= setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(this.setInterval);                                    
})

-end-

标签：未激活,vue,setInterval,self,定时器,loadData,document,页面
来源： https://www.cnblogs.com/wheatCatcher/p/12220930.html