vue3 全局定义防抖函数

joker云

已于 2022-08-24 10:15:00 修改

阅读量4k

点赞数 2

文章标签： vue.js

于 2022-03-23 14:11:55 首次发布

本文链接：https://blog.csdn.net/qq_38184425/article/details/123684470

版权

本文介绍了如何在Vue组件中实现自定义防抖功能，通过创建一个名为'Debounce'的组件，利用setTimeout进行事件处理函数的延迟执行。同时，也展示了如何使用lodash-es库的debounce函数来实现相同效果，用于优化频繁触发的事件处理，提高应用性能。示例中展示了将防抖应用于按钮点击事件的场景。

摘要由CSDN通过智能技术生成

一、自定义防抖组件

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;
};

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