一个优雅的轮循代码

实现代码

<script>
export default {
  data() {
    return {
      pollingST: null, // 定义一个计时器
      isPolling: false, // 定义一个标志变量
    }
  },
  mounted() {
    this.polling()
    document.addEventListener('visibilitychange', this.handleVisibilityChange)
  },
  methods: {
    polling() {
      if (this.isPolling) return // 如果已经在轮询，直接返回
      this.isPolling = true // 设置标志变量为 true
      // 定时器，每秒执行一次
      this.pollingST = setInterval(() => {
        // 获取当前时间，格式YYYY-MM-DD HH:mm:ss
        let now = new Date().toLocaleString()
        // 显示在控制台
        console.log(now)
      }, 1000)
    },
    handleVisibilityChange() {
      if (document.visibilityState === 'hidden') {
        clearInterval(this.pollingST)
        this.isPolling = false // 设置标志变量为 false
      } else if (document.visibilityState === 'visible') {
        this.polling()
      }
    },
  },
  beforeDestroy() {
    // 组件销毁时，清除定时器
    clearInterval(this.pollingST)
    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
  },
}
</script>