后端人员转战前端开发，小白的艰难之旅。

测试提了个bug单，原因是极短时间内多次点击按钮，新增了多条记录。我想到的最简单的方法就是申明个变量canClick，默认true，按钮加上:disabled="!canClick",在点击按钮触发的方法中首先将canClick置为false,表单校验失败时置为true，通过校验请求后台服务成功后置为true，后台服务抛异常后也置为true。想法很丰满，现实很骨感。验证的时候发现依然可以多次触发。

此路不通，请教了专业的前端大神，大神提了两个建议：函数节流、函数防抖。不多说，上代码：

/**
 * 函数节流
 * @param func
 * @param wait
 * @returns {function(...[*]=)}
 */
export const throttle = (func, wait=300) => {
  let timeout;
  return function() {
    let context = this;
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args)
      }, wait)
    }
  }
}

函数节流的特点是，在极短时间内多次点击，定义时间内只触发一次。如上代码表示：一直点击的话，每0.3秒内生效一次点击，一直点击的话还是会多次触发，不太适用当前场景。

/**
 * 函数防抖
 * @param func
 * @param wait
 * @returns {function(...[*]=)}
 */
export const debounce = (func, wait=300) => {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait);
  }
}

函数防抖的特点是，在极短的时间内多次点击，定义时间内停止点击才会触发。如上代码表示：每次点击间隔0.3秒内都会重置定时器，方法不会触发，直到停止点击，或者下次点击超过0.3秒，方法触发。

函数调用：把上面两个函数放入公共js中，页面引用。上代码：

saveData:debounce (()=>{

    // 自己的业务逻辑（表单校验、调用后台服务等）

},1000)

其实还有个简单直接的方法，也是这个大神提醒我的，其实我开始的思路没问题，就是在点击按钮触发的方法里先判断canClick，不可点击时直接返回，可以点击则把canClick置为false，下面逻辑不变。之所以之前设置 按钮不可点击，但短时间还是能点击多次估计是设完值后，页面需要渲染，虽然时间不长，但这段时间之内还是可以重复点击。