vue中实现定时器功能

引言

在使用vue开发注册页面的时候，需要完成获取邮箱验证码，然后获取按钮进入一分钟倒计时无法点击的需求。大概结果如下图

代码示例

按钮

<el-button :disabled="sendCodeDisabled" @click="getCode">
          {
   
   { sendCodeBtnWord }}
        </el-button>

data

sendCodeTime: 60,
sendCodeDisabled: false,
sendCodeBtnWord: "获取",
timer: null

method

//在需要调用定时功能的方法中去调用sendCode就可以了
    getCode(){
    
    
      if (this.registerForm.email !==null && this.registerForm.email.trim() !==''){
    
    
        sendVerifyCode(this.registerForm.email).then(res =>{
    
    
          this.registerForm.redisKey = res.data;
          this.$message.success("发送成功")
          //这里调用定时器
          this.sendCode()
        })
      }else {
    
    
        this.$message.warning("未输入邮箱")
      }

    },
//主要是下面这3个方法
    sendCode(){
    
    
      this.sendCodeDisabled=true
      this.startTimer();  //启动定时器
      this.timer = setInterval(() =>{
    
    
        //创建定时器
        if(this.sendCodeTime === 0){
    
    
          this.clearTimer();  //关闭定时器
        }else{
    
    
          this.startTimer();
        }
      },1000);
    },
    startTimer(){
    
    
      //启动定时器
      this.sendCodeTime--;  //定时器减1
      this.sendCodeBtnWord= this.sendCodeTime+'s'
    },
    clearTimer(){
    
    
      //清除定时器
      clearInterval(this.timer);
      this.timer = null;
      this.sendCodeBtnWord="获取"
      this.sendCodeDisabled=false;
      this.sendCodeTime=60;
    }

效果

点击获取按钮前

点击获取按钮后