VUE设置和清除定时器

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

方法一、在生命周期函数beforeDestroy中清除 

data() {
    return {
      timer: null;
    };
},
created() {    
    // 设置定时器,5s执行一次
    this.timer = setInterval(() => {
      console.log('setInterval');
    }, 5000);
}
beforeDestroy () {
    //清除定时器
    clearInterval(this.timer);
    this.timer = null;
}

方法二、使用hook:beforedestroy(推荐)

created() {    
    // 设置定时器,5s执行一次
    let timer = setInterval(() => {
      console.log('setInterval');
    }, 5000);

    // 离开当前页面时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer);
      timer = null;
    })
}

该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样,但更有优势

1.无需在vue实例上定义定时器,减少不必要的内存浪费

2.设置和清除定时器的代码放在一块,可读性维护性更好

三、beforeDestroy函数没有触发的情况

1、原因

<router-view>外层包裹了一层<keep-alive>

< keep-alive > 有缓存的作用,可以使被包裹的组件状态维持不变,当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在 < keep-alive > 中创建的组件,会多出两个生命周期钩子: activated 与 deactivated。

activated
在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。

deactivated
在组件失活时调用。

2、解决方案

借助 activated 和 deactivated 钩子来设置和清除定时器

(1)生命周期钩子

created() {
    // 页面激活时设置定时器
    this.$on("hook:activated", () => {
        let timer = setInterval(()=>{
          console.log("setInterval");
        },1000)
    })

    // 页面失活时清除定时器
    this.$on("hook:deactivated", ()=>{
      clearInterval(timer);
      timer = null;
    })
  }

(2)hook文章来源地址https://www.toymoban.com/news/detail-408436.html

data() {
    return {
      timer: null // 定时器
    }
},
activated() {
    // 页面激活时开启定时器
    this.timer = setInterval(() => {
      console.log('setInterval');
    }, 5000)
},
deactivated() {
    // 页面关闭(路由跳转)时清除定时器
    clearInterval(this.timer)
    this.timer = null
},

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

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

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

相关文章

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

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

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

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

    2024年02月01日
    浏览(58)
  • 单片机:定时器/计数器TMOD设置

    在嵌入式系统中,定时器和计数器是非常重要的功能模块。通过使用定时器/计数器,我们可以实现各种时间相关的操作,比如定时中断、计时测量等。在单片机中,定时器/计数器的配置是通过设置特定的寄存器来完成的。其中,TMOD寄存器用于设置定时器/计数器的工作模式。

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

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

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

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

    2024年02月12日
    浏览(45)
  • C++ 实现定时器的两种方法(线程定时和时间轮算法修改版)

    定时器要求在固定的时间异步执行一个操作,比如boost库中的boost::asio::deadline_timer,以及MFC中的定时器。也可以利用c++11的thread, mutex, condition_variable 来实现一个定时器。 1、使用C++11中的thread, mutex, condition_variable来实现一个定时器。 注:此算法会每一个任务创建一个线程,不推

    2024年02月05日
    浏览(50)
  • uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)

    本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件 tips: 如果需要做成区分登录状态的 看这篇优化后的文章: uniapp 持续获取定位(登录状态下才获取)(不采用定时器)(任意页面都可监听定位改变)_前端小胡兔的

    2024年02月14日
    浏览(64)
  • Vue3 setup语法糖销毁一个或多个定时器(setTimeout或setInterval)

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

    2024年02月13日
    浏览(52)
  • 【51单片机】如何设置中断函数(场景:在定时器工作完跳转到中断程序时,怎么识别我们的中断程序在哪里呢?)

    前言 大家好吖,欢迎来到 YY 滴单片机系列 ,热烈欢迎! 本章主要内容面向接触过单片机的老铁 本章是【利用定时器和中断实现一个简单项目】中的一部分,感兴趣的老铁可以跳转传送门查看 传送门 欢迎订阅 YY 滴C++专栏!更多干货持续更新!以下是传送门! YY的《C++》专

    2024年02月19日
    浏览(55)
  • vue-element-table表格实现每一条数据绑定定时器实现倒计时或者持续时间

    前言 最近在开发中遇到一个需求,每一条数据前端计算处理时间,或者是倒计时时间。 第一表格不可能展示所有数据,所以我们需要当前时间和数据库开始时间获取一个初始值。 第二我们需要把定时器持续时间绑给每一条数据中,方便展示,和操作时候传递给后端存储。

    2024年01月20日
    浏览(70)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包