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动态组件实例解析

    Vue动态组件实例解析

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件。这篇文章主要介绍了Vue动态组件 ,需要的朋友可以参考下
    2017-08-08
  • 代码详解Vuejs响应式原理

    代码详解Vuejs响应式原理

    这篇文章主要介绍了代码详解Vuejs响应式原理的基础知识,有兴趣的朋友们参考学习下吧。
    2017-12-12
  • vue.js购物车添加商品组件的方法

    vue.js购物车添加商品组件的方法

    这篇文章主要介绍了vue.js购物车添加商品组件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue使用echarts时created里拿到的数据无法渲染的解决

    vue使用echarts时created里拿到的数据无法渲染的解决

    这篇文章主要介绍了vue使用echarts时created里拿到的数据无法渲染的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue中实现回车键切换焦点的方法

    Vue中实现回车键切换焦点的方法

    这篇文章主要介绍了在Vue中实现回车键切换焦点的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 详解Vue.js3.0 组件是如何渲染为DOM的

    详解Vue.js3.0 组件是如何渲染为DOM的

    这篇文章主要介绍了详解Vue.js3.0 组件是如何渲染为DOM的 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Antd下拉选择,自动匹配功能的实现

    Antd下拉选择,自动匹配功能的实现

    这篇文章主要介绍了Antd下拉选择,自动匹配功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 离线搭建vue环境运行项目详细步骤

    离线搭建vue环境运行项目详细步骤

    由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,下面这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的详细步骤,需要的朋友可以参考下
    2023-11-11
  • element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)

    element el-tooltip动态显示隐藏(有省略号显示,没有省略号不显示)

    本文主要介绍了element el-tooltip动态显示隐藏,主要实现有省略号显示,没有省略号不显示,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 详解vue 自定义marquee无缝滚动组件

    详解vue 自定义marquee无缝滚动组件

    这篇文章主要介绍了vue自定义marquee无缝滚动组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论