美文网首页
02-vue清除定时器的更好方法

02-vue清除定时器的更好方法

作者: 零涂 | 来源:发表于2022-02-12 14:32 被阅读0次

原文地址:https://www.jianshu.com/p/f3165b012420

常用方法:

在data函数里面进行定义定时器名称:

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

定时器使用:

this.timer = setInterval(() => {
    // 某些操作
}, 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) 停止侦听一个事件

相关文章

  • 02-vue清除定时器的更好方法

    原文地址:https://www.jianshu.com/p/f3165b012420[https://www.j...

  • vue 如何更好的清除定时器

    清除定时器,这是在我们开发项目中常见功能需求 在vue项目中清除定时器方法时我们通常会用到以下两种方法 方法一 这...

  • 定时刷新setInterval

    VUE中 在方法中或钩子函数中使用 清除定时器

  • 定时器

    定时器概念 1.setTimeout 概念 语法 清除定时器 2.setInterval 概念 语法 清除定时器 ...

  • vue 如何清除定时器

    以下清除定时器的旧方法: 1、在data函数里面进行定义定时器名称 2、在beforeDestroy()生命周期内...

  • 6、驯服线程和定时器

    定时器和线程是如何工作的 JavaScript提供了两种方式,用于创建定时器以及两个相应的清除方法。这些方法都是w...

  • vue中定时器的设置和销毁

    方案1(推荐): 该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。 const tim...

  • 定时器

    1.倒计定时器(setTimeout) clearTimeout清除定时器2.循环定时器(setInterval)...

  • Vue中清除定时器的更好方法(个人笔记)

    常用方法: 在data函数里面进行定义定时器名称: 定时器使用: 最后在beforeDestroy()生命周期内清...

  • BOM 定时器

    一、定时器setTimeout、清除定时器clearTimeout 1、window.setTimeout(调用函...

网友评论

      本文标题:02-vue清除定时器的更好方法

      本文链接:https://www.haomeiwen.com/subject/zuwtlrtx.html