[vue] setInterval 使用定时器timer及其清理hook:beforeDestory

533_

于 2022-07-06 13:14:13 发布

阅读量317

点赞数 1

分类专栏： # vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_14993591/article/details/125637649

版权

vue 专栏收录该内容

169 篇文章 3 订阅

订阅专栏

方式一：定义data中定义timer

export default {
  data() {
    return {
      // 定义定时器
      timer: null,
    };
  },

  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        // 需要做的事情
      }, 1000);
    },

    stopTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },

  mounted() {
    this.startTimer();
  },

  beforeDestroy() {
    this.stopTimer();
  },
};

方式二：监听事件hook:beforeDestroy

export default {
  methods: {
    startTimer() {
      // 启动计时器
      let timer = setInterval(() => {
        //需要做的事情
        console.log(11111);
      }, 1000);

      // 销毁计时器
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
        timer = null;
      });
    },
  },

  mounted() {
    this.startTimer();
  },
};