antd防抖函数使用---用于防止重复提交

在vue2中使用ant-design-vue的框架，其框架中的工具包含了防抖函数。

我们先来看一下框架里面防抖函数的定义

export function debounce(func, wait, immediate) {
  var timeout = void 0;
  function debounceFunc() {
    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    var context = this;
    // https://fb.me/react-event-pooling
    if (args[0] && args[0].persist) {
      args[0].persist();
    }
    var later = function later() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) {
      func.apply(context, args);
    }
  }
  debounceFunc.cancel = function cancel() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  };
  return debounceFunc;
}

该函数实现了一个防抖功能，即在一定时间内多次触发同一事件时，只执行最后一次触发的事件。 参数说明：

- func：要执行的函数 - wait：等待时间，即多长时间内只执行最后一次触发的事件

- immediate：是否立即执行第一次触发的事件 函数内部定义了一个timeout变量，用于存储setTimeout返回的定时器ID。

在debounceFunc函数内部，先判断是否有事件参数，并调用persist方法以确保事件可以在异步时仍然可用。然后定义了一个later函数，用于实际执行func函数，并在wait时间后执行，同时清除之前设置的timeout定时器ID。如果immediate为true且timeout为null，则立即执行func函数。最后，返回了一个包含cancel函数的函数，用于取消之前设置的定时器。

我们在vue的页面先引入函数。

 import { debounce } from '/node_modules/ant-design-vue/es/vc-table/src/utils.js'

然后在created函数里面定义

created () {
  this.save = debounce(this.save, 5000, true)}

按钮绑定事件

@click="save"

写事件方法

async save () {
//要执行的业务方法
}

上面防抖函数可以立即执行，在5秒之内的重复点击都是无效的，只执行第一次。