一、自定义防抖组件

1. utils 文件夹下 的 index.js 中 写入防抖的执行函数

export const debounce = (func, time, ctx, immediate) => {
  let timer;
  const rtn = (...params) => {
    clearTimeout(timer);
    if (immediate) {
      let callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, time);
      if (callNow) func.apply(ctx, params);
    } else {
      timer = setTimeout(() => {
        func.apply(ctx, params);
      }, time);
    }
  };
  return rtn;
};

2. mian.js 中加入以下代码

import { debounce } from '@/utils'

app.component('Debounce', {
    abstract: true,
    props: ['time', 'events', 'immediate'],
    created() {
      this.eventKeys = this.events && this.events.split(',');
    },
    render() {
      const vnode = this.$slots.default()[0];
      this.eventKeys.forEach((key) => {
        vnode.props[`on${key}`] = debounce(
          vnode.props[`on${key}`],
          this.time,
          vnode,
          this.immediate,
        );
      });
      return vnode;
    },
  });

使用如下

<Debounce :time="500" :immediate="true" events="Click">
  <button @click="handle">一个按钮或者任意一个元素</button>
</Debounce>

二、使用 lodash-es 中的 debounce 实现防抖

import { debounce } from 'lodash-es';
const executeFn = () => {
	// 执行函数的逻辑
}
/**
* @ 使用debounce 生成一个防抖函数 testDebounce 
* @ executeFn 需要被执行的函数
* @ 500 时间
*/
const testDebounce = debounce(executeFn, 500)

使用

<button @clcik="testDebounce">点击按钮</button>

参考

vue2+ts 使用lodash防抖处理数据
https://blog.csdn.net/wanghuohuo1998/article/details/119511254?spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-13.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-13.pc_relevant_paycolumn_v3&utm_relevant_index=16