前端实现手机短信验证码倒计时效果
实现效果：实现按钮倒计时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)
}