zoukankan      html  css  js  c++  java
  • 小程序 短信验证码 倒计时 变量作用域

    限流的策略

    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>
    

      

  • 相关阅读:
    常用Docker命令
    Ubuntu16.04安裝最新Nvidia驱动
    (转)5分钟让你明白“软链接”和“硬链接”的区别
    Centos7 Zabbix3.2集群安装
    Kettle定时抽取两个库中的两个表到目标库SYS_OPLOG表
    Elasticsearch Java API—多条件查询(must)
    logstash采集tomcat日志、mysql错误日志
    让Logstash每次都从头读文件及常见问题
    logstash之multiline插件,匹配多行日志
    spring security积累
  • 原文地址:https://www.cnblogs.com/rsapaper/p/9434094.html
Copyright © 2011-2022 走看看