vue中实现定时器功能

短命女 2023-09-23 21:50 115阅读 0赞

### 引言 ###

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

![image-20230108184958517][]

### 代码示例 ###

#### 按钮 ####

<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;
        }

#### 效果 ####

点击获取按钮前

![image-20230108184820127][]

点击获取按钮后

![image-20230108184905219][]

[image-20230108184958517]: https://img-blog.csdnimg.cn/img_convert/fa345e910997fa3fbb7563627b8517a3.png
[image-20230108184820127]: https://img-blog.csdnimg.cn/img_convert/f567135f7669a86880d89708e355ab3d.png
[image-20230108184905219]: https://img-blog.csdnimg.cn/img_convert/8b5b0c0e6105fe0eb6e39bc224c1b4d1.png