问答

vue 清除异步产生的定时器

作者:admin 2021-05-11 我要评论

遇到的如下场景: 使用了async created钩子, await某个请求完成后,设置this.timer为定时器 问题如下: 如果用户在请求结束后才离开页面,我们可以在beforeDest...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

遇到的如下场景:

使用了async created钩子, await某个请求完成后,设置this.timer为定时器

问题如下:

  • 如果用户在请求结束后才离开页面,我们可以在beforeDestory中clear定时器,没什么问题。
  • 如果用户在请求结束前离开页面(此时即使离开了页面created钩子仍然会执行),请问如何不生成、或者生成后clear这个定时器?

解决方法:
暂时想到的只有axios的 canceltoken去停止请求。请问有更好的设计方式或者解决方案吗?

----更新
暂时又想到了一个 在定时器里判断 this._isDestroyed 如果是true就擦掉这个定时器

###

我觉得你那两个想法是可以的,不过如果很多组件使用的话会比较麻烦点,我建议你整一个mixin封装一下。
类似这样:

const VueTimer = {
    beforeCreate() {
      this.$timerMap = {}
      this.$setTimeout = (handler, timeout) => {
        if (!this._isDestroyed) {
          this.$timerMap[setTimeout(handler, timeout)] = timeout
        }
      }
    },
    beforeDestroy() {
      Object.keys(this.$timerMap).forEach((timer) => {
        clearTimeout(timer)
      })
    }
}

然后全局注册下

Vue.mixin(VueTimer)

组件里使用

created() {
  this.$setTimeout(() => {
    console.log('timer')
  }, 1000)
}

这样就不需要每次判断了,VueTimer将会在组件销毁时自动清空定时器

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue 清除异步产生的定时器

    vue 清除异步产生的定时器

  • 给body加背景图如何适应屏幕大小

    给body加背景图如何适应屏幕大小

  • vue使用L2Dwidget报错了

    vue使用L2Dwidget报错了

  • 鼠标在 input 框内点击时边框有一种闪

    鼠标在 input 框内点击时边框有一种闪

腾讯云代理商
海外云服务器