ElementUI Button定时器

今天遇到的问题是在做王老师的作业项目中遇到的，就是我要通过邮箱登录，我把这一部分的功能完善了，但是我发现有一个问题，就是可以一直发，这个显然是不行的，因为不加以限制用户可以随意的发送获取验证码的请求，消耗占用了系统资源不说，还会有很多问题，所以我就在button上加了一个定时器，设置60秒的禁用时间。

具体逻辑

发送成功 进入定时器，进行60秒倒计时。

发送失败 不进入定时器。

其实我个人感觉这个还是有问题的，因为这种它的生命周期很短，刷新页面就没了，但是我现在也只能用到这么多了（不知道存到cookie或session行不行）。

代码示例：

    <el-col :span="8">
    <el-button @click="sendCode"  :disabled="buttonDisabled" class="login-content-code">{{ buttonName}}</el-button>
    </el-col>   
 
  data(){
    return{　　
        buttonName : '获取验证码',　　//按钮名称
        buttonDisabled : false,　　 //按钮是否禁用
        time : 60,　　　　　　　　　　 //时间
        succ : '',　　　　　　　　　　 //是否成功发送，根据这个条件来判断是否进入定时器　　
    }
  },
methods:{
      sendCode(){
        request.post("/user/sendCode",this.ruleForm).then(res =>{
          if(res.code === '0'){
            this.$message({
              type : "success",
              message : "发送成功",
            })
            this.succ = '发送成功'
          }else {
            this.$message({
              type : "error",
              message : res.msg
            })
            this.succ = '发送失败'
          }
        })
        var countDown = setInterval(() => {

          if (this.time < 1) {
            this.buttonDisabled = false
            this.buttonName = '获取验证码'
            this.time = 60
            clearInterval(countDown)
          } else if(this.time >= 0 && this.succ == '发送成功'){
            this.buttonDisabled = true
            this.buttonName = this.time-- + 's后重发'
          }
        }, 1000)


      },
}

定时器这一部分代码是我copy的，然后根据自己的代码又进行了改动，可以参考一下我的代码。

效果展示