vue beforeDestroy clearInterval清除定时器失效的解决

更新时间：2023年06月29日 09:10:38 作者：啃代码的毛毛虫

这篇文章主要介绍了vue beforeDestroy clearInterval清除定时器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue beforeDestroy clearInterval清除定时器失效

我发现遇到这个问题的人挺多的，自己遇到过，改别人代码的时候也遇到过，赶紧记下来~这方法好使~

情景

路由跳转时触发了beforeDestroy，里面也写了清除计时器的相关代码，但是到其他页面时还是在一直执行。

// 父组件 某条件触发路由跳转，定时器在/xxx中一直调用
    router.push('/xxx')
// 子组件
    mounted() {
     this.timer = setInterval(()=>{
        this.heartbeat();
      },5000);
    },
    beforeDestroy(){
      // 页面离开时断开连接,清除定时器
      console.log( '------------' );
      clearInterval(this.timer);
    },

解决方法

使用程序化的事件侦听器，试试这个：

mounted: function () {
  var timer = setInterval(()=>{
    this.heartbeat();
  },5000);
  // 通过 $once 来监听定时器，在 beforeDestroy 钩子可以被清除。
  this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
  })
}

vue中切换页面清除定时器

data中定义全局变量

intervalFlag: "",

mounted中创建定时器

5分钟执行一次loadTable方法

 this.intervalFlag = setInterval(() => {
      this.loadTable();
    }, 1000 * 5 * 60);

destroyed中清除定时器

  destroyed () {
    //清空定时任务
    if (this.intervalFlag) {
      clearTimeout(this.intervalFlag);
      this.intervalFlag = null;
    }
    var lastTimeoutId = setTimeout(";");
    for (var i = 0; i <= lastTimeoutId._id; i++) {
      clearTimeout(i);
    }
  },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 读取HTMLCollection列表的length为0问题
这篇文章主要介绍了Vue 读取HTMLCollection列表的length为0问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
深入浅析vue-cli@3.0 使用及配置说明
这篇文章主要介绍了vue-cli@3.0 使用及配置说明,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
Vue显示图片的几种方式小结
本文主要介绍了Vue显示图片的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
Vue 使用v-model实现控制子组件显隐效果
v-model 可以实现双向绑定的效果,允许父组件控制子组件的显示/隐藏,同时允许子组件自己控制自身的显示/隐藏,本文给大介绍Vue 使用v-model实现控制子组件显隐,感兴趣的朋友一起看看吧
2023-11-11
详解vuex数据传输的两种方式及this.$store undefined的解决办法
这篇文章主要介绍了vuex数据传输的两种方式及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
element-ui自定义message-box自定义样式不生效的解决
这篇文章主要介绍了element-ui自定义message-box自定义样式不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vuejs+vue-router打包+Nginx配置的实例
今天小编就为大家分享一篇Vuejs+vue-router打包+Nginx配置的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
axios的interceptors多次执行问题解决
这篇文章主要为大家介绍了axios中interceptors多次执行问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
vue中后端做Excel导出功能返回数据流前端的处理操作
这篇文章主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue倒计时3秒后返回首页Demo(推荐)
这篇文章主要介绍了Vue倒计时3秒后返回首页Demo,倒计时结束后要清除计时器,防止内存泄漏,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-11-11