Vue:使用定时器timer及其清理hook:beforeDestory-阿里云开发者社区

开发者社区> 开发者小助手-bz> 正文

Vue:使用定时器timer及其清理hook:beforeDestory

简介: Vue:使用定时器timer及其清理hook:beforeDestory
+关注继续查看

方式一:定义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();
  },
};

参考

vue项目中使用$.once(‘hook:beforeDestory‘,() => {})清理定时器问题

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java 定时器 Timer 的使用.
一、概念       定时计划任务功能在Java中主要使用的就是Timer对象,它在内部使用多线程的方式进行处理,所以它和多线程技术还是有非常大的关联的。在JDK中Timer类主要负责计划任务的功能,也就是在指定的时间开始执行某一个任务,但封装任务的类却是TimerTask类。
865 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12046 0
使用 VuePress 搭建博客网站
使用 VuePress 搭建博客网站
76 0
vue使用ajax返回数据赋值给table无法立即生效问题
主要问题是:ajax返回之后默认无法勾选,虽然data已经赋值,但是页面并没有生效
3018 0
【MyEcplise】导入项目后,会定时弹出一下错误MyEcplise tern was unable to complete your request in time.This couble happen if your project contains several large javaScr
Myecplise弹出错误如下:   错误代码: MyEcplise tern was unable to complete your request in time.This couble happen if your project contains several large javaScript libraies.
993 0
1569
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载