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

冷不防 2024-03-24 11:27 40阅读 0赞

在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秒之内的重复点击都是无效的，只执行第一次。