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);
    }
  },

总结

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

相关文章

  • Nuxt升级2.0.0时出现的问题(小结)

    Nuxt升级2.0.0时出现的问题(小结)

    这篇文章主要介绍了Nuxt升级2.0.0时出现的问题(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 详解在vue使用weixin-js-sdk常见使用方法

    详解在vue使用weixin-js-sdk常见使用方法

    这篇文章主要介绍了 详解在vue使用weixin-js-sdk常见使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue移动端路由切换实例分析

    vue移动端路由切换实例分析

    本篇文章给大家分享了vue移动端路由切换实例以及相关知识点,对此有兴趣的朋友可以参考学习下。
    2018-05-05
  • 详解如何用VUE写一个多用模态框组件模版

    详解如何用VUE写一个多用模态框组件模版

    这篇文章主要介绍了详解如何用VUE写一个多用模态框组件模版,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue Components 数字键盘的实现

    Vue Components 数字键盘的实现

    这篇文章主要介绍了Vue Components 数字键盘的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue点击按钮动态创建与删除组件功能

    vue点击按钮动态创建与删除组件功能

    这篇文章主要介绍了vue点击按钮动态创建与删除组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 解决ele ui 表格表头太长问题的实现

    解决ele ui 表格表头太长问题的实现

    这篇文章主要介绍了解决ele ui 表格表头太长问题的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue 框架之键盘事件、健值修饰符、双向数据绑定

    Vue 框架之键盘事件、健值修饰符、双向数据绑定

    这篇文章主要介绍了Vue 框架之键盘事件、健值修饰符、双向数据绑定问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue使用Tinymce富文本自定义toolbar按钮的实践

    Vue使用Tinymce富文本自定义toolbar按钮的实践

    本文主要介绍了Vue使用Tinymce富文本自定义toolbar按钮,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue项目中icon乱码的问题及解决

    vue项目中icon乱码的问题及解决

    这篇文章主要介绍了vue项目中icon乱码的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论