短信验证码功能编写

H5短信验证码功能，点击发送验证码调用后端接口，页面展示一分钟倒计时，倒计时结束重新显示发送验证码

<li>
      <span class="ipt-name accounts"></span>
      <input
        type="tel"
        maxlength="11"
        placeholder="请输入手机号"
        v-model="phone"
      />
    </li>
    <li>
      <span class="ipt-name note"></span>
      <input
        type="text"
        maxlength="11"
        placeholder="请输入验证码"
        v-model="smsCode"
      />
      <span class="verify-text js_verify" @click="sendMsg">{{
        textMsg
      }}</span>
    </li>

export default {
  data() {
    return {
      smsCode: "", //短信验证码
      phone: "", //手机号
      textMsg: "发送验证码",
      timeNum: 60, //计时器
      clock: "",
    };
  },
  methods: {
  	//发送验证码
    sendMsg() {
      if (this.timeNum == 60) {
        var reg =
          /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
        if (this.phone == "") {
          this.$toast.showToast("请输入手机号");
          return;
        } else if (!reg.test(this.phone)) {
          this.$toast.showToast("请输入正确格式手机号");
          return;
        }
        this.textMsg = this.timeNum + "s后可重获";
        this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
        console.log(this.clock);
            sendMsg({
              phone: this.Phone,
              type: 1,
            })
              .then((res) => {
                if(res.resCode !== "000000"){             
                    this.$toast.showToast(res.resMsg);
                    clearInterval(this.clock); //清除js定时器
                    this.textMsg = "发送验证码";
                    this.timeNum = 60; //重置时间
                  }
                }
              })
              .catch((err) => {
                this.$toast.showToast(err);
              });         
      } else {
        return;
      }
    },
    doLoop() {
      this.timeNum--;
      if (this.timeNum > 0) {
        this.textMsg = this.timeNum + "s后可重获";
      } else {
        clearInterval(this.clock); //清除js定时器
        this.textMsg = "发送验证码";
        this.timeNum = 60; //重置时间
      }
    },
  }
}

这里用到了节流的方法处理。

函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，节流会稀释函数的执行频率。

//防抖debounce代码：
function debounce(fn,delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', debounce(handle,500));

//节流throttle代码：
function throttle(fn,delay) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
 
function sayHi(e) {
    console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));

我的博客主页 ：https://qingmuzhang.gitee.io/