vue中清除定时器的方法实例详解

this.curPageUrl = this.$route.path;

if (this.curPageUrl && this.curPageUrl != this.$route.path) {
    return false;
}

this.curPageUrl = "end";
this.realtimeLoadPointDataTimer && clearTimeout(this.realtimeLoadPointDataTimer);

export default {
  data() {
    return {
      curPageUrl: "", // 当前页面的路由地址
    };
  },
  watch: {},
  created() {
    this.query();

    this.curPageUrl = this.$route.path;
  },
  mounted() {},
  beforeDestroy() {
    this.curPageUrl = "end";
    this.realtimeLoadPointDataTimer &&
      clearTimeout(this.realtimeLoadPointDataTimer);
  },
  destroyed() {
    this.realtimeLoadPointDataTimer &&
      clearTimeout(this.realtimeLoadPointDataTimer);
  },
  methods: {
    /** 查询数据 */
    query() {
      this.realtimeLoadPointDataTimer &&
        clearTimeout(this.realtimeLoadPointDataTimer);

      if (this.curPageUrl && this.curPageUrl != this.$route.path) {
        return false;
      }

      // 设置延迟5秒执行回调函数
      setTimeout(() => {
        if (this.checked == true) {
          // 设置500毫秒执行一次
          this.realtimeLoadPointDataTimer = setTimeout(() => {
            this.query();
          }, 500);
        }
      }, 5000);
    },
  },
};