Vue中如何清除一个定时器

2022-08-17 10:32:22 阅读：147 来源： 互联网

标签：定时器 setInterval 清除 beforeDestroy timer Vue null data

一般我们在清除定时器的时候是这样写的：

<script>
export default {
  data() {
    return {
      timer:null,
    }
  },
  mounted() {
    
  },
  methods: {
    openTimer(){
      this.timer = setInterval(()=>{
        console.log("setInterval");
      },1000)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer);
    this.timer = null;
  }
}
</script>

开启定时器和清除定时器的代码分散开在两个地方，有损可读性/维护，这使得我们比较难于程序化地清理我们建立的东西。
timer 被定义在 data 里，实际上 timer 不需要什么响应式操作，定义在 data 里是没必要的，反而造成性能浪费

优化后：

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    let timer = setInterval(()=>{
      console.log("setInterval");
    },1000)
    //  一次性侦听一个事件,只执行一次
    this.$once("hook:beforeDestroy", ()=>{
      clearInterval(timer);
      timer = null;
    })
  }
}
</script>

衍生问题：beforeDestroy 没有触发？

在后台系统中，我们常常会设置页面缓存，而当路由被 keep-alive 缓存时是不走 beforeDestroy 生命周期的，所以有些小伙伴以为在 beforeDestroy 清除定时器就完事了，甚至都没有检查一下，实际上定时器并没有被清除掉。知道了原因也就好解决了，借助 activated 和 deactivated 这两个生钩子

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    let timer = setInterval(()=>{
      console.log("setInterval");
    },1000)
    this.$on("hook:activated", () => {
      if (timer === null) { // 避免重复开启定时器
        timer = setInterval(()=>{
          console.log("setInterval");
        },1000)
      }
    })
    this.$on("hook:beforeDestroy", ()=>{
      clearInterval(timer);
      timer = null;
    })
  }
}
</script>

这里需要注意一下，由于缓存原因，所以需要用 $on 而不是 $once，不然执行一次后就不会再触发了。

标签：定时器,setInterval,清除,beforeDestroy,timer,Vue,null,data
来源： https://www.cnblogs.com/yunjiao/p/16594098.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue中如何清除一个定时器

衍生问题：beforeDestroy 没有触发？