小程序验证码倒计时功能,setData异步的问题

要实现发送验证码后倒计时60s后,能够重新点击,但是使用setData设置button按钮的禁用的话有异步问题,倒计时为0的时候,狂点按钮,可以发送好几条验证码,请问这个怎么解决呢,主要代码如下

<button disabled='{{verifyBtnDisable}}' bindtap="sendVerify">{{verifyBtnText}}</button>

data:{
    //验证码倒计时
    verifyBtnDisable:true,
    verifyBtnText:'发送验证码'
}
//发送验证码
  sendVerify:function(){
    let userTel = this.data.userTel.tel;
    console.log(userTel);
    console.log("发送验证码");
    wx.request({
      url: 'http://register.fd1.b.zhihui.hbraas.com/index.php?r=register/send-code',
      data: {"Telephone":userTel},
      method:'get',
      dataType:'json',
      success:res=>{
        if (res.statusCode==200){
          console.log("验证码发送成功");
          this.setData({
            verifyBtnDisable: true
          })
          this.countDown();
        }else{
          console.log(res.statusCode);
          console.log(res.data);
        }
      }
    });
  },
  //验证码倒计时
  countDown:function(){
    let num = 5;
    let interval = setInterval(e=>{
      if(num <= 0){
        clearInterval(interval);
        this.setData({
          verifyBtnText: "发送验证码",
          verifyBtnDisable: false
        });
      }else{
        num--;
        this.setData({
          verifyBtnText: num + 's'
        });
      }
    },1000)
  },
阅读 1.8k
2 个回答

点击的时候判断下啊,如果按钮的内容==='发送验证码'才执行后续操作啊,否则return掉啊

setData是更改页面上的值,可以在countDown里面更改this.data.verifyBtnDisable的值, 然后在发送请求的方法里面加个判断,判断的也是this.data.verifyBtnDisable,如果为true, 直接return

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题