js函数防抖、短信验证码、验证码倒计时模块

// 多次点击节流防抖
function debounce(func, wait = 500) {
  let timeout;
  return function (event) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.call(this, event)
    }, wait);
  };
}

  <view class="phone_area">
    <view class="phone_area_number">
      <view class="phone_area_ ">请输入手机号：</view>
      <input class="phone_area_input" bindinput="bindnumbervalue" maxlength="11">{{phone_number}}</input>
    </view>
    <view class="phone_area_code">
      <view class="phone_area_ ">请输入验证码：</view>
      <input class="phone_area_input" bindinput="bindcodevalue" maxlength="4">{{phone_code}}</input>
      <view class="get_code_button" bindtap='verification'>{{phone_code_text}}</view>
    </view>
  </view>

Page({
  data: {
    // 手机验证码
    phone_number: '', // 手机号
    phone_code_text: '获取验证码',  // 按钮提示信息
    phone_code: '', // 验证码
    status: true,
  },
  // 手机输入 
  bindnumbervalue(event){
    this.setData({
      phone_number: event.detail.value
    })
  },
  // 验证码功能
  bindcodevalue(event){
    this.setData({
      phone_code: event.detail.value
    })
  },
  // 点击获取验证码  并添加 debounce 节流防抖
  verification: debounce(function(e){
    if((this.data.phone_number).length !== 11){
      wx.showToast({
         : '请输入正确的手机号',
        icon: 'none'
      })
      return 
    }
    
    // 此处需要调用api接口, 假设返回 code 0 ,成功.  返回其他 return
    
    console.log(this.data.status)
    if (this.data.status === false) {
      return
    }

    var _this = this
    var code_number = 60 // 定义 60 秒的倒计时
    var code_value = setInterval(function () {
      _this.setData({
        phone_code_text: '重新获取' + (--code_number) + 's',
        status: false
      })
      if (code_number == 0) {
        clearInterval(code_value)
        _this.setData({
          phone_code_text: '获取验证码',
          status: true,
        })
      }
    }, 1000)
  }),
})