前端实现手机短信验证码倒计时效果

实现效果：实现按钮倒计时10s后可重新发送验证码

一、思路

1、禁用按钮，调用后端接口，获取验证码

2、setTimeOut(() => {},1000)延迟1s执行，time - 1，返回文案，9s

3、迭代处理，调用自身函数，time - 1，返回文案，8s，实现9s 8s 7s 这样倒计时的效果。

4、不能无限迭代减1，判断时间为最后一秒时，解除按钮禁用状态

二、代码

    sendVerifyCode() {
      this.verifyCodeDisable = true;
      // 调用后端接口获取验证码
      this.getVerifyCode()
      // 初始化倒计时时间
      let time = 10;
      this.setTime(time)
    },
    setTime(time) {
      setTimeout(() => {
        if (time > 1) {
          time--;
          // 返回文案
          this.tips = time + 's';
          // 迭代调用
          this.setTime(time)
        } else {
          // 倒计时最后一秒，解除禁用状态，可重新发送验证码
          this.verifyCodeDisable = false;
          this.tips = '获取验证码';
        }
      }, 1000)
    }