轮询定时器清除 + vue2.0

憨憨404

已于 2024-01-23 12:16:25 修改

阅读量850

点赞数 9

分类专栏： vue项目文章标签： vue.js 前端 javascript

于 2024-01-11 17:23:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_60839348/article/details/135534331

版权

需求?

Gin + Vue + Element UI框架中,

我的大屏可视化项目, 大屏页面, 里边写了多个轮询定时器. 离开页面需要清理掉, 要不然切换路由还会在后台运行,

页面是自动缓存状态, 也不存在销毁一说了

所以通过路由router配置中, 页面路由监听中, 进行监听路由变化, 但是也没生效

普通定时器清除

需要注意: router 应该写 noCache:true属性,这样每次进入都会加载了, 这样组件的mounted挂载和 destroyed销毁才会生效, 可以配合 keepAlive:true进行组件缓存

  data() {
    return {
      timer: null // 定时器状态
    }
  },
  mounted() {
    // 消息提醒
    this.startTimer()
  },
  destroyed(){
    // 离开当前路由后的操作
　　clearInterval(this.timer)
　　timer = null
  },
  methods: {
    /** 查询参数列表 */
    startTimer() {
      if (this.timer) clearInterval(this.timer) //清空上一个定时器
      this.timer