Vue如何优雅的清除定时器

2024-11-30 15:36:25

前言

清除定时器，相信有相当一部分人是这么写的：

export default {
  data() {
    reurn {
      timer: null
    }
  },

  mounted() {
    this.timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
  },

  beforeDestroy() {
    clearInterval(this.timer)
  }
}

这是一段常见的代码，至少我身边的好几个小伙伴（1-3年经验的都有）都是这么写的，这里存在3个不优雅的问题：

clearInterval 后没有清空 timer 为 null。
开启定时器和清除定时器的代码分散开在两个地方，有损可读性/维护性，用尤大大的话说，这使得我们比较难于程序化地清理我们建立的东西。
timer 被定义在 data 里，实际上 timer 不需要什么响应式操作，定义在 data 里是没必要的，反而造成性能浪费。

优化

直接上代码：

export default {
  data() {
    reurn {
    }
  },

  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

这里使用 hook 监听 beforeDestroy 生命周期，这样 timer 只需被定义在生命周期里，以上的问题就全部解决了。

衍生问题：beforeDestroy 没有触发？

在后台系统中，我们常常会设置页面缓存，而当路由被 keep-alive 缓存时是不走 beforeDestroy 生命周期的，所以有些小伙伴以为在 beforeDestroy 清除定时器就完事了，甚至都没有检查一下，实际上定时器并没有被清除掉。知道了原因也就好解决了，借助 activated 和 deactivated 这两个生钩子：

export default {
  data() {
    reurn {
    }
  },

  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$on('hook:activated', () => {
      if (timer === null) { // 避免重复开启定时器
        timer = setInterval(() => {
          console.log('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

这里需要注意一下，由于缓存原因，所以需要用 $on 而不是 $once，不然执行一次后就不会再触发了。

到此这篇关于Vue如何优雅的清除定时器的文章就介绍到这了,更多相关Vue 清除定时器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue清除定时器setInterval优化方案分享

两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称: data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器: this.timer = (() => { // 某些操作 }, 1000) 最后在beforeDestroy()生命周期内清除定时器: beforeDestroy() { clearInterval(this.timer); this.timer = null; } 方案1有
vue路由事件beforeRouteLeave及组件内定时器的清除方法

背景之前在做ADTS项目的时候,首页是一个实时监测的页面,需要每隔5秒更新一次数据,而业务逻辑上的需要先请求告警列表的接口的,从告警列表中拿到数据再去获取其他的数据,所以我在获取告警列表的方法中增加了一个定时器. 最开始我是将定时器声明在组件内部的(由于页面不多,数据关联也不太强,所以项目中没有使用store进行数据管理),后来清除的时候发现无法清除,后来索性声明到window下了.然后在组件内部写了如下代码: 发现也没能将定时器清除,后来走debug发现根本就没有进到这个方法中去,然后就去问
Vue如何优雅的清除定时器

目录前言优化衍生问题:beforeDestroy 没有触发? 前言清除定时器,相信有相当一部分人是这么写的: export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer) } } 这是一段常见的代
VUE设置和清除定时器的方式及遇到的问题

目录方法一.在生命周期函数beforeDestroy中清除方法二.使用hook:beforedestroy(推荐) 三.beforeDestroy函数没有触发的情况 1.原因 2.解决方案附:vue离开页面销毁定时器总结方法一.在生命周期函数beforeDestroy中清除 data() { return { timer: null; }; }, created() { // 设置定时器,5s执行一次 this.timer = setInterval(() => { console.l
vue页面使用多个定时器的方法

本文实例为大家分享了vue页面使用多个定时器的具体代码,供大家参考,具体内容如下问题描述 vue页面使用多个定时器 html: <div class="prod-item"> <ul> <li v-for="(item, index) in state.list" :key="index" :class="[
vue中优雅实现数字递增特效的详细过程

目录需求实现基本开发思路指令的开发指令的基本结构指令的优化实现单位变化总结需求前几天项目开发中遇到一个需求,需要在数字更新时,实现其动态递增的效果并且,在数字大于10000时,将单位进行转换,如数字大于10000时,单位从m²变为万m² 我们以vue中开发为例,一一实现下这两个需求. 实现基本开发思路实现数字递增,最容易的,我们应该可以想到通过setinterval函数实现数字累加功能.比如,我们的最终值是finanllyNum, 我们可以很快想到这样的函数: let
AngualrJs清除定时器遇到的坑

angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会影响系统的性能. 我在angular里边用原生的方法window.onunload方法竟然不管用,所以只好用angular自己的方法$destroy,这页面跳转,DOM结构发生变化是都能清除定时器 var timer = setInterval(function(){ $scope.$apply(function(){ //这里是想要定
如何在vue里面优雅的解决跨域(路由冲突问题)

如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*': { target: 'http://localhost:3000' } }, 这种配置方式在一定程度上解决了跨域问题,但是会带来一些问题, 比如我们的vue 路由也命名为 goods,这时候就会产生了冲突, 如果项目中接口很多,都在这里配置是很麻烦的,也
详解小程序退出页面时清除定时器

由于小程序页面退出时,定时器和长连接等不会自动清除断开,所以需要我们在生命周期函数中手动清除但是定时器定义在函数中,我们无法在函数外清除,所以为了解决这个问题,我们需要把定时器定义在data中比如:Loadingtime是一个定时器,在data中定义Loadingtime:''. 然后在time方法中使用在onUnload监听页面卸载生命周期函数中清除如此在退出该页面时,就可以清除该定时器了以上所述是小编给大家介绍的小程序退出页面时清除定时器详解整合,希望对大家有所帮助,如果大家有任何
angular2组件中定时刷新并清除定时器的实例讲解

实例如下: import { Component,OnInit,ChangeDetectionStrategy,ChangeDetectorRef,OnDestroy} from "@angular/core"; @Component({ changeDetection:ChangeDetectionStrategy.OnPush }) export class xxxComponent{ private timer; constructor(private ref : ChangeD
vue使用keep-alive后清除缓存的方法

什么是keepalive? 在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件. 也就是说,keepalive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 .也就是所谓的组件缓存基本用法 <keep-alive> <component /> //你的组件 </keep-alive> 需求:从列表页进入详情页,再返回列表页时保留查询条件,但在切换其他tab

Vue如何优雅的清除定时器

目录

前言

优化

衍生问题：beforeDestroy 没有触发？

相关推荐

随机推荐