关于vue中如何清除定时器的方法

这篇具有很好参考价值的文章主要介绍了关于vue中如何清除定时器的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、问题

1、在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继续执行。
2、在这里需要说一下setTimeout的使用场景:
(1)需要执行一次定时的时候用得到,比如需要在多久之后执行的一次操作
(2)接口需要定时查询,并且需要在接口返回数据后再查询的情况下(接口定时查询的时候,该方式会经常用得到)

二、问题出现的原因

场景:目前有个接口方法,执行该方法需要5s执行完成,并且还需要在执行完后定时查询数据
问题原因分析:
(1)问题发生的场景

关于vue中如何清除定时器的方法文章来源地址https://www.toymoban.com/news/detail-408921.html

a. 该方法需要5s执行完,但是当执行到该方法中第2s的时候,切换页面的时候将该组件销毁了
b. 销毁了该组件,但是该方法还是会在缓存中执行往下执行,并不会因为组件销毁而停止执行后面的代码,所以后面的定时器还是会执行到,并且后续的定时器也会一直执行
c. 因为一直在缓存中执行,并且组件已经销毁了,所以定时器就会存在清不掉的情况
(2)这种情况是偶发性的,很少有需要执行5s的方法,为了将该问题复现测试,我测试的时候是自己模拟了一下这个场景,所以使用的是5s;大部分的情况可能是几十毫秒或者几百毫秒就可以执行完成了,但是在销毁的时候,恰好处于方法执行的过程中,就会导致定时器清不掉的情况

三、问题解决思路

1、解决的思路跟我之前写的关于定时器的使用及页面切换时定时器无法清除的问题解决办法这篇文章差不多,是基于该文章的思路的一个补充,可以一起参考下
2、在使用定时器的组件中,使用一个curPageUrl来记录当前使用组件的页面所在的路由地址
该参数是用于对比路由跳转的情况,如果该参数和当前访问的路由地址不一致,那么就能判断出使用定时器的组件已经销毁了,不需要再继续执行了
3、在created或mounted中为curPageUrl赋初始值
this.curPageUrl = this.$route.path;
4、在使用定时器的方法中判断是否往下执行
if (this.curPageUrl && this.curPageUrl != this.$route.path) {
    return false;
}
5、在beforeDestroy和destroyed中为curPageUrl赋一个永远不能出现的一个值,并且清除定时器
this.curPageUrl = "end";
this.realtimeLoadPointDataTimer && clearTimeout(this.realtimeLoadPointDataTimer);

四、实现的源代码

export default {
  data() {
    return {
      curPageUrl: "", // 当前页面的路由地址
    };
  },
  watch: {},
  created() {
    this.query();

    this.curPageUrl = this.$route.path;
  },
  mounted() {},
  beforeDestroy() {
    this.curPageUrl = "end";
    this.realtimeLoadPointDataTimer &&
      clearTimeout(this.realtimeLoadPointDataTimer);
  },
  destroyed() {
    this.realtimeLoadPointDataTimer &&
      clearTimeout(this.realtimeLoadPointDataTimer);
  },
  methods: {
    /** 查询数据 */
    query() {
      this.realtimeLoadPointDataTimer &&
        clearTimeout(this.realtimeLoadPointDataTimer);

      if (this.curPageUrl && this.curPageUrl != this.$route.path) {
        return false;
      }

      // 设置延迟5秒执行回调函数
      setTimeout(() => {
        if (this.checked == true) {
          // 设置500毫秒执行一次
          this.realtimeLoadPointDataTimer = setTimeout(() => {
            this.query();
          }, 500);
        }
      }, 5000);
    },
  },
};

五、总结

在开发过程中,定时器是会经常用得到的,这种情况发生的机率很小,但并不是不会发生,为了避免该情况发生,这一个解决方案可能并不是很完美,但是能够解决这类问题
如果有更好的解决方案,或者使用该解决方案解决类似问题的遇到了问题,欢迎即使交流!!!

到了这里,关于关于vue中如何清除定时器的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript中两种定时器和清除定时器的使用

    ​ 定时器就是在一段特定的时间后执行某段程序代码。 以指定的时间间隔(时间单位为毫秒)调用一次函数的定时器。 轮循定时器是以指定的时间间隔(时间单位为毫秒)重复调用一个函数的定时器。 clearTimeout(timeoutID) :清除只执行一次的定时器(setTimeout函数)。 timeoutID 为

    2024年02月13日
    浏览(43)
  • 定时器的设置和清除setTimeout、setInterval、setImmediate-NodeJs

    JS是单线程运行逻辑,所有的程序默认在一个线程执行,出现排队执行。所有的定时器中,回调函数会在主线程后事件队列中执行。              一次性定时器的 开启:当间隔时间到了,会调用 一次 回调函数,间隔时间的单位是毫秒。               var timer=setTimeout(回

    2024年02月04日
    浏览(44)
  • 关于JS定时器的整理

    在JS中定时器有非常大的作用,例如: 执行延迟操作:使用setTimeout可以在一定的延迟后执行特定的代码。这对于需要在一定时间后执行某些操作的情况非常有用,例如延迟显示提示信息、执行动画效果等。 定期刷新数据:使用 setInterval 可以定期执行某段代码,例如定时从服

    2024年02月12日
    浏览(37)
  • 关于单片机的分频定时器的记录

    对于单片机的频率原来一直不太明白,现在在学习进行记录: 主频: 分频 对于分频来说,实际就是相当于间接降低这个主频,减少这个震荡次数,比如我分频系数为72,那么我就是1S产生的震荡次数就是72000000/72=1000000次,相当于用少的计数来对一秒钟进行计数。 那么有人好

    2024年04月09日
    浏览(47)
  • stm32f407关于通用定时器各种函数——PWM(二)

            定时器产生PWM:在计数器频率固定时,PWM 频率由 自动重载寄存器(TIMx_ARR) 的值决定,其占空比由 捕获/比较寄存器(TIMx_CCRx) 的值决定         定时器工作在递增计数模式,纵轴是计数器的计数值 CNT,横轴表示时。当 CNT=CCRx 时,IO 输出高电平(逻辑 1);

    2024年02月08日
    浏览(81)
  • vue中销毁定时器

    vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。 场景:在A.vue页面有一个定时a,然后跳转到B.vue页面,此时A页面的定时器a依然在运行。 解决方式一: 首先在data里进行定义定时器; 然后在mounted里使用定时器; 最

    2024年02月12日
    浏览(35)
  • 关于STM32的hal库中滴答定时器uwTick溢出的思考和分析

    思考:如果中断函数HAL_IncTick中的uwTick一直增加导致溢出会不会导致延时不准? 下面展示一些 STM32的官方库文件stm32f1xx_hal.c部分摘录 。 系统Tick频率设置为1毫秒中断一次,每1ms产生一次Tick中断, 在Tick中断中uwTick++; 那么当自增到0xFFFFFFFF后就会溢出,再从0开始自增 。 0xFFFF

    2024年03月21日
    浏览(43)
  • jbpm定时器不生效问题梳理

    springboot+struts2+hibernate+mysql+jbpm4 测试环境可以执行定时器 是阿里云 正式环境不可以执行定时器 阿里云 两个库不同,代码相同,推测是表数据导致的问题 但是不清楚各表结构及定时任务的执行流程

    2024年02月12日
    浏览(29)
  • Vue中 使用定时器 (setInterval、setTimeout)

    js中定时器有两种,一个是 循环执行 setInterval ,另一个是 定时执行 setTimeout 。 注意:定时器需要在页面销毁的时候清除掉,不然会一直存在! 1. 循环执行( setInterval ) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会循环执行这个方法,直到这个定时器被销毁

    2024年02月12日
    浏览(44)
  • 在 React 中如何使用定时器

    在React中使用定时器通常有两种方式:使用 setInterval 和 setTimeout 函数。 使用 setInterval 函数: 首先,在组件中导入 useEffect 和 useState 函数: 在组件中声明一个状态变量来存储定时器的ID: 在组件的 useEffect 钩子函数中启动定时器: 在上述代码中,通过 useEffect 中的一个空数组

    2024年02月10日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包