一般项目中获取验证码时，设置等待时间60s，倒计时结束之后才能继续重新获取
问题：一开始我只是给按钮设置了倒计时，以至于按钮是一次性的，只能获取一次，倒计时结束按钮恢复可点击状态，再点击之后按钮就不倒计时了...
原因：是因为我在编写计时器的时候没清除之前的计时器，没考虑到：如果获取验证码失败，计时器依然开始工作,造成定时器结束未销毁或倒计时未停止，造成再次点击不是从头开始
所以再进入新一轮计时时要清楚之前的计时器：
et intervalId = null
const startCountdown = () => {countdown.value = 60countdownActive.value = trueif (intervalId) {//清空之前的定时器clearInterval(intervalId)}intervalId = setInterval(() => {if (countdown.value <= 0) {clearInterval(intervalId)intervalId = nullcountdown.value = 60countdownActive.value = false} else {countdown.value -= 1}}, 1000)
}例子：
//获取短信验证码，限制等待一分钟再次获取//定时器
let intervalId = null
const startCountdown = () => {countdown.value = 60countdownActive.value = trueif (intervalId) {//清空之前的定时器clearInterval(intervalId)}intervalId = setInterval(() => {if (countdown.value <= 0) {clearInterval(intervalId)intervalId = nullcountdown.value = 60countdownActive.value = false} else {countdown.value -= 1}}, 1000)
}//获取验证码
const handleVerify = async () => {if (!loginForm.account || !loginForm.captcha) {message.error("请先填写手机号和图形验证码");}else{let reqData = {phone: loginForm.account,code: loginForm.captcha,captchaId: loginForm.captchaId,};countdown.value = 60;countdownActive.value = true;try {let sendVerificationCodeUrl = `/user/sendVerificationCode`;let result = await axios.post(sendVerificationCodeUrl, reqData);//重置倒计时if (result.data.code == 200) {message.success("验证码已发送到" + loginForm.account);}startCountdown() //发送成功调用倒计时} catch (error) {console.log(error);message.error(error.response.data.msg);getCaptcha();countdownActive.value = false;loginForm.captcha = null;}}};
