+-
我用avalon做了一个获取手机验证码的页面,在获取验证码后一定时间内不能再次获取,有倒计时,第一次倒计时正常显示,再次获取时倒计时无法正常显示,但是后台数据的确变了
因为测试所以将时间改为3,看右侧控制台变量的确减小,但是视图一直是3
// html
<div class="form-item">
<span>手机号</span>
<input type="text" placeholder="请输入手机号" :duplex="@phoneNum" maxlength="11" :keyup="@numKeyUp">
<a :click="@getVerificationCode">{{@canGetCodeFlg?'获取验证码':'重新获取('+@canGetCodeTime+')'}}</a>
</div>
// js
getVerificationCode:function () {
if(this.canGetCodeFlg && this.regPhone.test(this.phoneNum)){
// 发送请求验证码
// 设置不能再次点击获取验证码 && 开始倒计时
this.canGetCodeFlg = false;
this.countDown();
}else if(this.canGetCodeFlg){
// 手机号格式错误
this.phoneErr = true;
alert('请输入正确得手机号')
}
},
countDown:function () {
var timer = setInterval(function () {
if(this.canGetCodeTime > 0){
console.log(this.canGetCodeTime)
this.canGetCodeTime--;
}else{
// 重置
this.canGetCodeTime = 3;
this.canGetCodeFlg = true;
clearInterval(timer);
}
}.bind(this),1000)
}