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

两种方案清除定时器，开发者经常使用方案1，建议使用方案2

方案1

首先我在data函数里面进行定义定时器名称：

data() {
  return {
    timer: null // 定时器名称
  }
},

然后这样使用定时器：

this.timer = (() => {
  // 某些操作
}, 1000)

最后在beforeDestroy()生命周期内清除定时器：

beforeDestroy() {
  clearInterval(this.timer);
  this.timer = null;
}

方案1有两点不好的地方，引用尤大的话来说就是：

它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。

方案2

该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。

以下是完整代码：

const timer = setInterval(() =>{
  // 某些定时器操作
}, 500);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
  clearInterval(timer);
})

其他程序化的事件侦听器

通过 $on(eventName, eventHandler) 侦听一个事件

通过 $once(eventName, eventHandler) 一次性侦听一个事件

通过 $off(eventName, eventHandler) 停止侦听一个事件

附官网详细地址：程序化事件侦听器

补充知识：vue在mounted中创建定时器与清除定时器

我就废话不多说了，大家还是直接看代码吧~

mounted(){
   var that=this;
    var num = 1;
    var ss='';
   var a=setInterval(()=>{
    a+=10;
     if(this num===100){
      ss='success';
      console.log(ss)
    			clearInterval(a)  //当num等于100时清除定时器
   }
   }, 1000);
  }

以上这篇Vue清除定时器setInterval优化方案分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE实现自身整体组件销毁的示例代码

    V-IF实现组件自身销毁 前面说了一些自己怎么思考得来,如果时间急可直接看 最后~~~~ 通知提示组件案例分析 在编写一些简单的通知组件案例中,可能会这样去写 //在[index.js]的install方法里 setTimeOut(()=>{ document.body.removeChild([DOM]) , timer} //定时的移除DOM 再看另一个Loading插件案例V-show template : <template> <div class="box-co

  • 解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    问题: 从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行.如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况. 原因: 当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的. data () { return { ct: null } }, methods: { start() { this.ct= setTimeout( () => {that.countdow

  • 解决vue组件销毁之后计时器继续执行的问题

    直接上代码,以下 window.setTimeout(function(){ if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁 return; } window.location.href = "/serverMonitor?t="+ new Date().getTime(); },5000) 很粗暴的方法,在执行之前看是否被销毁就行, 第二种方法,调用路由组件内的钩子函数beforeRouteLeave be

  • vue 组件销毁并重置的实现

    方法1 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false

  • vue项目开发中setTimeout等定时器的管理问题

    一.问题来源. 在项目中,我们经常有这样的需求,一个页面初始化后,需要不断的去请求后端,来获取当前某个记录的最新状态. 显然,这个可以用setTimeout以及回调中继续setTimeout来实现. 我们假设定时器是在页面#/test/aaa上创建的. 但是,会遇到以下两个问题,我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb,定时器还在跑. 其次,如果我不断在#/test/aaa 和 #/test/bbb两个页面之间不断的切换,而且切换时

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

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

  • Vue中的性能优化方案

    目录 减少响应式使用 1. 使用 computed 缓存计算结果 2. 本地化响应式变量 3. 函数式组件(Vue2) 减少 DOM 渲染压力 1. DOM 频繁切换展示的情况使用 v-show 2. keep-alive 缓存组件状态 3. 路由懒加载 4. 图片懒加载 5. 组件销毁时要清除定时器.EventListener 6. 列表使用唯一 key 减少打包体积 1. 开启 gzip 压缩 2. 按需引入第三方组件 最近使用 Vue 开发的过程中使用到一些对于性能有所提升的编码方式,所以

  • Vue项目打包编译优化方案

    1. 不生成.map文件 默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件. 我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的.这里我们需要配置不生成map文件. vue-cli2 config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 f

  • Vue SPA 首屏优化方案

    Vue SPA 首屏优化方案

    前言 常规 vue 项目打包后访问,返回一个只包含 div 的 html,其他内容块都是通过 js 动态生成的. 存在两个比较大的问题: 不利于 seo 首屏加载页慢,用户体验不好 本文是自己根据项目经验总结的方案,如有不足,欢迎指出~ 优化 SSR SSR(Server-Side Rendering) 即服务端渲染,把 vue 组件在服务器端渲染为组装好的 HTML 字符串,然后将它们直接发送到浏览器,最后需要将这些静态标记混合在客户端上完全可交互的应用程序. 使用 ssr 重新部署构建项目后

  • Vue 项目性能优化方案分享

    Vue 项目性能优化方案分享

    目录 前言 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch  区分使用场景 1.3.v-for遍历必须为item添加key,且避免同时使用v-if 1.4.长列表性能优化 1.5.事件的销毁 1.6.图片资源懒加载 1.7.路由懒加载 1.8.第三方插件的按需引入 1.9.优化无限列表性能 1.10.服务端渲染 SSR or 预渲染 二.Webpack 层面的优化 2.1.Webpack 对图片进行压缩 2.2.减少 ES6 转为

  • c#并行任务多种优化方案分享(异步委托)

    遇到一个多线程任务优化的问题,现在解决了,分享如下. 假设有四个任务: 任务1:登陆验证(CheckUser) 任务2:验证成功后从Web服务获取数据(GetDataFromWeb) 任务3:验证成功后从数据库获取数据(GetDatFromDb) 任务4:使用2.3的数据执行一个方法 (StartProcess) 一个比较笨的方法(本人最开始的方法,记为方法1)是直接开启一个线程,按照顺序依次执行四个任务: 复制代码 代码如下: new Thread(delegate              

  • Mysql性能优化方案分享

    网上有不少mysql 性能优化方案,不过,mysql的优化同sql server相比,更为麻烦,同样的设置,在不同的环境下 ,由于内存,访问量,读写频率,数据差异等等情况,可能会出现不同的结果,因此简单地根据某个给出方案来配置mysql是行不通的,最好能使用status信息对mysql进行具体的优化. mysql> show global status; 可以列出MySQL服务器运行各种状态值,另外,查询MySQL服务器配置信息语句: mysql> show variables; 一.慢查询

  • sql 百万级数据库优化方案分享

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如:select id from t where num is null 可以在num上设置默认值0,确保表中num列没有null值,然后这样查询:select id from t where num=0 3.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使

  • Vue如何优雅的清除定时器

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

  • MySQL优化方案之开启慢查询日志

    MySQL优化方案之开启慢查询日志

    目录 前言 设置慢查询日志 测试 附:日志分析工具mysqldumpslow 总结 前言 本方案只适应于小的项目.项目未上线或者紧急情况下可采用这种方式,一旦开启慢日志查询会增加数据库的压力,所以一般采用后台对数据操作时间写入日志文件中,每一周定时进行清除日志 mysql优化方案:开启慢查询日志(查询sql执行超过一秒以上sql等等) 开启慢查询日志:可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 参数说明: slow_query_log

随机推荐