vue中销毁定时器

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

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

解决方式三:文章来源地址https://www.toymoban.com/news/detail-519962.html

beforeRouteLeave(to, from, next){
    next();
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },

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

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

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

相关文章

  • Vue3 setup语法糖销毁一个或多个定时器(setTimeout或setInterval)

    如果在页面/组件增加了定时器,就算跳转到其他页面,定时器也不会被清理,这时候就需要手动清理,不然会有意想不到的bug,也会影响性能。 setTimeout是只执行一次,setInterval是循环执行,以下是用setTimeout举例子,如果想要用setInterval,替换一次方法就行。 setTimeout替换成

    2024年02月13日
    浏览(52)
  • JavaScript中两种定时器和清除定时器的使用

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

    2024年02月13日
    浏览(43)
  • STM32 hal库编程定时器清除中断标志位,开启定时器中断会立即进入中断的问题

    1、如果不清除中断标志位,开启定时器中断的话,不能完成相应的计时,会立即进入中断。 2、如果在开启定时器中断前清除了中断标志位,就会等待计时完成再出发中断。 3、主要是针对单次计时使用,尤其是对第一次计时有要求的程序。

    2024年02月01日
    浏览(55)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

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

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

    2024年02月04日
    浏览(44)
  • 使用Js定时器来定时跳转

    🍎道阻且长,行则将至。🍓 Js小记🍀 记录:想实现在5秒后跳转到指定页面,使用到 JS定时器 和 Location 对象。 有两种定时器: setTimeout 和 setInterval ,一个是在指定时间结束后执行一次,另一个是根据指定时间循环。 Location 对象是 JavaScript 对地址栏封装的对象。可以通过操

    2023年04月08日
    浏览(44)
  • js 定时器

    JavaScript 中的定时器(Timer)是一种机制,用于在指定的时间间隔之后执行代码或者在指定的时间点执行代码。它可以用来实现延迟执行、周期性执行等需求。 JavaScript 提供了两个主要的定时器函数: setTimeout() : setTimeout() 函数用于在指定的时间延迟后执行一次代码。 第一个

    2024年02月10日
    浏览(56)
  • js实现定时器

    用原生js实现一个倒计时效果.最下面有全部源码,需要自取 js语法 : setTimeout :定时器 document.getElementById :Document的方法 getElementById()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。 remove

    2024年02月11日
    浏览(72)
  • JS 定时器setInterval()

    过多的就不描述了,可以直接参考官方文档: 官方文档:https://developer.mozilla.org/en-US/docs/Web/API/setInterval 参考文档:https://www.jianshu.com/p/55b4eb04b1d3 直接上干货 setInterval(参数1,参数2) setInterval(方法名, 1000 * 60 * 1); 描述:定时执行 间隔执行 注意: 1.参数1可以是一个匿名函数 也可以是

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

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

    2024年02月12日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包