鍍金池/ 問答/HTML5  HTML/ 小程序驗證碼倒計時功能,setData異步的問題

小程序驗證碼倒計時功能,setData異步的問題

要實現(xiàn)發(fā)送驗證碼后倒計時60s后,能夠重新點擊,但是使用setData設(shè)置button按鈕的禁用的話有異步問題,倒計時為0的時候,狂點按鈕,可以發(fā)送好幾條驗證碼,請問這個怎么解決呢,主要代碼如下

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

data:{
    //驗證碼倒計時
    verifyBtnDisable:true,
    verifyBtnText:'發(fā)送驗證碼'
}
//發(fā)送驗證碼
  sendVerify:function(){
    let userTel = this.data.userTel.tel;
    console.log(userTel);
    console.log("發(fā)送驗證碼");
    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("驗證碼發(fā)送成功");
          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: "發(fā)送驗證碼",
          verifyBtnDisable: false
        });
      }else{
        num--;
        this.setData({
          verifyBtnText: num + 's'
        });
      }
    },1000)
  },
回答
編輯回答
別傷我

setData是更改頁面上的值,可以在countDown里面更改this.data.verifyBtnDisable的值, 然后在發(fā)送請求的方法里面加個判斷,判斷的也是this.data.verifyBtnDisable,如果為true, 直接return

2017年4月13日 03:38
編輯回答
悶騷型

點擊的時候判斷下啊,如果按鈕的內(nèi)容==='發(fā)送驗證碼'才執(zhí)行后續(xù)操作啊,否則return掉啊

2018年7月1日 08:11