实现效果:实现按钮倒计时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)}