在vue中写了计时器，清除不了？---踩坑了

菜鸟小佳

于 2018-12-05 17:14:33 发布

阅读量6.4k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42429288/article/details/84839692

本文探讨了如何使用计时器实现按钮的禁用与自动启用功能，通过设定计时器变量并在条件满足时清除，确保按钮在指定时间内不可用，随后自动恢复可用状态。文章详细介绍了具体代码实现，包括在Vue框架中使用计时器的方法，以及如何在组件销毁前正确清除计时器避免内存泄漏。

点击导表按钮

3秒之内按钮无法点击，过了3秒之后还原

问题：采用计时器来实现效果，3秒后以后无法清除计时器

解决：在data中命名一个变量，存放计时器，满足条件清除这个变量，然后确保清除(在beforeDestroy钩子中再写一个清除)

export default {
  data() {
    return {
      oldtime:3,//按钮不能重复点击----时间
      disable:false,//导表按钮是否禁用
      guide:null,//计时器
    }
   }
}

<el-button type="primary" @click="exportExcel" :disabled="disable" >导表</el-button>

     // 导出表格所用
    exportExcel() {
        this.oldtime=3;
        this.disable=true;
        this.guide =setInterval(()=>{
          this.oldtime--
          console.log(this.oldtime);
          if (this.oldtime==0) {
            clearInterval(this.guide)
            this.disable=false;
          }
        },1000)
    }

确保清除

  beforeDestroy() {
    clearInterval(this.guide);
    this.guide=null;
  }