函数防抖（防表单重复提交）

一、函数防抖（防表单重复提交）

在前端开发中，常常需要对某些函数进行节流和防抖。目前针对不同场景防抖方案也较多，其中lodash和rxjs中提供的方案，是一种被广泛使用的方案，其通用性也较强，使用简单，可以覆盖我们大部分的业务场景。

哪些场景需要使用防抖方案

• 点击按钮提交表单：使用防抖策略防止表单重复提交
• 根据用户输入实时拉取服务端数据：使用防抖方案控制ajax请求频率

建议：涉及到以上场景的情况，如无特殊原因，建议采用本文描述的防抖方案

lodash和rxjs中的防抖策略遵循以下原则

• 原则1.函数执行过一次后，在等待时间段内不能再次执行。
• 原则2.在等待时间内触发此函数，则重新计算等待时间。

即：当调用函数n毫秒后，才会执行该动作，若在这n毫秒内又调用该函数则将取消前一次计时并重新计算执行时间

实现源码（参考lodash）

/**
 * 防抖函数
 * @param {*} func 需要防止抖动的回调函数
 * @param {*} wait 防抖时间，单位毫秒，默认500毫秒
 */
export const deBounce = (func, wait=500) => {
  let timeOut = null;
  return function (...args) {
    clearTimeout(timeOut);
    timeOut = setTimeout(() => {
      if (typeof func === "function") {
        func(...args);
      }
    }, wait);
  };
}

使用示例

import { deBounce } from "@/utils/util"; // 导入函数
  const deBounceClick = deBounce(() => { // 注意：防抖函数是个闭包，返回值是一个函数
    // 在这里执行你的提交逻辑
  }, 500); // 500毫秒内该按钮没有点击行为则触发提交逻辑，否则，重新计时
<button onclick={deBounceClick}>提交数据</button> <!-- 点击按钮时调用deBounceClick -->

不足：上面示例设置防抖时间为500毫秒，表示用户点击按钮500毫秒后再次点击按钮，会再次触发提交。这种防抖方案没有考虑服务端返回时间，对于需要考虑服务端返回的场景，需要自行在业务逻辑中处理。