小程序 短信验证码 倒计时 变量作用域

 

 

限流的策略

1、回避时间的策略

2、页面交互（视觉、触觉）的策略

 

let smsSent = false;
let second = 60;
// var countdown = function(that) {
function countdown(that) {
  second = that.data.second
  if (second == 0) {
    that.setData({
      second: 60,
      smsSent: !smsSent
    });
    return;
  }
  var time = setTimeout(function() {
    that.setData({
      second: second - 1
    });
    countdown(that)
  }, 1000)
};





  getMobilePwdSubmit: function(e) {

    if (smsSent) {
      wx.showToast({
        title: '等待验证码、超限!',
        icon: 'none',
        duration: 1500
      });
      return
    }

    console.log('getMobilePwdSubmit')
    console.log(e)
    console.log(e.detail.value)
    try {
      wx.removeStorageSync('loginMobile')
      wx.removeStorageSync('passwordMobile')
      wx.removeStorageSync('uid')
    } catch (e) {
      console.log(e)
      // Do something when catch error
    }
    let userPhoneChk = e.detail.value.usernameMobile;
    let reg = /^1[345789]\d{9}$/;
    var that = this;
    if (!reg.test(userPhoneChk)) {
      wx.showToast({
        title: '请重新输入手机号!',
        icon: 'none',
        duration: 1500
      });
    } else {
      console.log('ac')
      this.setData({
        passwordMobile: ''
      });

      wx.request({
        url: apiUrlApp + 'send_sms_code',
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        method: "POST",
        data: {
          bind_phone: userPhoneChk,
        },
        success: function(res) {
          console.log(res.data)
          if (res.data.status != 1) {
            wx.showToast({
              title: res.data.errmsg,
              icon: 'none',
              duration: 1500
            });
          } else {
            wx.showToast({
              title: '发送成功，请查收短信！',
              icon: 'success',
              duration: 1500
            });

            smsSent = true;
            that.setData({
              smsSent: smsSent
            });
            countdown(that);

            var nowTimestamp = new Date().getTime();
            wx.setStorageSync("sms_birth_timestamp", nowTimestamp);
            wx.setStorageSync("loginMobile", userPhoneChk);
            wx.setStorageSync("uid", res.data.data["uid"]);

          }
        }
      });

    }
  },

　　

            <view wx:if="{{smsSent}}">
              <input class="weui-input" type="number" value="{{passwordMobile}}" name="passwordMobile" maxlength="13" placeholder="请 {{second}} 秒后重试!" bindinput="passwordMobileStorage" />

            </view>
            <view wx:else>
              <input class="weui-input" type="number" value="{{passwordMobile}}" name="passwordMobile" maxlength="13" placeholder="请输入短信验证码" bindinput="passwordMobileStorage" />
              <view class="weui-cell__ft">
                <button formType="submit" class="weui-vcode-btn sub-font-size-01">获取验证码
                </button>
              </view>
            </view>