7、vue中使用定时器，setInterval setTimeout

cathy18c

于 2019-07-13 17:19:58 发布

阅读量989

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE框架

本文链接：https://blog.youkuaiyun.com/cathy18c/article/details/95767450

VUE框架专栏收录该内容

32 篇文章

订阅专栏

博客介绍了Vue中有两套定时器，分别是windows对象的和Vue/Node.js封装的。默认使用Vue封装的定时器，但其只引用了setTimeout，clearInterval清不掉，建议手动引用windows对象的定时器，并在created定义，在beforeDestory中清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中两套定时器，一个是windows对象的，另一个是vue/node.js 封装的，需要引用

import { setInterval, clearInterval } from 'timers'

一般我们写

this.timer = setInterval(() => {
      this.getRealData()
}, 10000)

默认使用vue封装的，它会自动引用

import { setTimeout } from 'timers'

但是它只引用了一半，只引用了setTimeout 没有clearInterval 会出现清不掉的情况。所以还是自己手动引用比较好

建议使用windows对象的定时器，使用方法

window.clearInterval(this.timer)

定时器在created定义，在beforeDestory中清楚

created() {
    this.$nextTick(() => {
      this.getRealData()
      this.getDriver()
    })
    this.timer = setInterval(() => {
      this.getRealData()
    }, 10000)
}

beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 关闭
    }
}