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.clearSetInterval() // 調用之前必須清除原有定時器，否則會疊加
    this.addSetInterval()
  },
  beforeDestroy () {// 【路由銷毀】:清除定時器
    console.log("路由銷毀后");
    this.clearSetInterval()
    document.removeEventListener(this.visibilityChangeEvent, this.onVisibilityChange);// 先移除具名函數（匿名函數無法移除）
  },
  methods: {
    // 常規方法:
    addSetInterval () {
      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-