vue中销毁定时器的几种解决方案
更新时间：2023年08月18日 10:05:19 作者：ldcaws
这篇文章主要给大家介绍了关于vue中销毁定时器的几种解决方案,销毁定时器的操作一般是在beforeDestroy钩子中进行，根据定时器的数量不同可以有多种解决方法,需要的朋友可以参考下
引言
vue是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。
场景：在A.vue页面有一个定时a，然后跳转到B.vue页面，此时A页面的定时器a依然在运行。
解决方式一：
- 首先在data里进行定义定时器；
data() {
return {
timer: null // 定时器名称
}
},- 然后在mounted里使用定时器；
this.timer= setInterval(() => {
// 操作
method();
}, 60000);- 最后在beforeDestroy里清除定时器；
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},解决方式二：
通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器。
this.timer= setInterval(() => {
// 操作
method();
}, 60000);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer);
})解决方式三：
beforeRouteLeave(to, from, next){
next();
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},附：vue离开页面时清除定时器
let timer = setInterval(function(){
console.log("我是定时器=====");
},2000);
this.$once("hook:beforeDestroy", () =>{
clearInterval(timer);
});总结
到此这篇关于vue中销毁定时器的几种解决方案的文章就介绍到这了,更多相关vue销毁定时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue install 注册全局组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了Vue数据绑定简析小结，本文将从源码的角度来对Vue响应式数据中的观察者模式进行简析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
在 Vue 的响应式系统中,reactive 对象是一个深度代理,它会追踪对象属性的变更,但如果你将整个对象重新赋值,那么 Vue 无法继续追踪新的对象,本文给大家介绍了使用reactive导致数据失去响应式的原因和解决方案,需要的朋友可以参考下2024-09-09
Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用(适合新手)
在Vue项目中导出Excel表格是常见的功能,特别是在后台管理系统中,为了方便用户将大量数据保存为本地文件,这篇文章主要给大家介绍了关于Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用的相关资料,需要的朋友可以参考下2024-06-06
Vue3使用axios请求拦截器和vuex设置全局loading方式
本文介绍了如何在Vue.js项目中实现全局loading加载动画,并通过axios拦截器控制loading的显示与隐藏2025-12-12
vue router下的html5 history在iis服务器上的设置方法
这篇文章主要介绍了vue router下的html5 history在iis服务器上的设置方法，需要的朋友参考下吧2017-10-10
这篇文章主要为大家详细介绍了vue实现物流时间轴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue el-table 默认展开某一行的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue3实现手机上可拖拽元素的组件，用vue3实现一个可在手机上拖拽元素的组件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕边缘2022-09-09
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论