Mini Program CAPTCHA countdown function, setData asynchronous problem

to achieve the 60 seconds countdown after sending CAPTCHA, you can click again, but if you use setData to set the button button to disable, there is an asynchronous problem. When the countdown is 0, the crazy button can send several CAPTCHAs. How to solve this? the main code is as follows

.
<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)
  },

judge when you click, ah, if the content of the button = 'send CAPTCHA' before performing the follow-up operation, otherwise return drop


setData is the value on the change page, you can change the value of this.data.verifyBtnDisable in countDown, and then add a judgment to the method of sending the request, which is also judged if this.data.verifyBtnDisable, directly return for true,

.
Menu