vue 清除setInterval定时器

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

通常有2种清除方式：

1、在beforeDestroy或者destroyed钩子函数中执行清除：

data() {            
    return {                              
        timer: null  // 定时器名称          
    }        
},
mouted() {
    this.timer = (() => {
    //定时器的 js操作
    }, 1000)
},
beforeDestroy() {//或者destroyed钩子函数中执行清除
    clearInterval(this.timer);        
    this.timer = null;//清空内存
}

通过上述方式来清除定时器，会存在两个潜在的问题，按官方文档的说法是：

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

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

2、所以推荐用下面的方式：通过 程序化的侦听器【$once事件侦听器】来清除定时器。

mounted() {
    var timer = setInterval(() =>{                    
    // 定时器的js操作                
    }, 1000);            
    // 通过$once来监听定时器，在beforeDestroy钩子函数中清除定时器。
    this.$once(\'hook:beforeDestroy\', () => {            
        clearInterval(timer);                                    
    })
}

以上是 vue 清除setInterval定时器 的全部内容， 来源链接： utcz.com/z/376125.html

回到顶部