vue防抖函数实现

防抖函数的基本概念

防抖（Debounce）是一种优化高频触发事件的技术，确保函数在连续触发时只执行一次。常见场景包括输入框搜索、窗口大小调整等。

Vue中实现防抖的几种方式

使用Lodash库的debounce方法

安装Lodash后，可以直接使用其_.debounce方法：

import _ from 'lodash';

export default {
  methods: {
    handleInput: _.debounce(function() {
      // 实际逻辑代码
      console.log('Input debounced');
    }, 500)
  }
}

自定义防抖函数

若不依赖第三方库，可手动实现防抖：

export default {
  methods: {
    debounce(func, delay) {
      let timeoutId;
      return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    },
    handleInput() {
      const debouncedFn = this.debounce(() => {
        console.log('Input debounced');
      }, 500);
      debouncedFn();
    }
  }
}

在Vue 3的setup语法中使用

通过ref和onMounted结合实现：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const debounce = (func, delay) => {
      let timeoutId;
      return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    };

    const handleInput = debounce(() => {
      console.log('Input debounced');
    }, 500);

    return { handleInput };
  }
}

注意事项

• 延迟时间：根据实际需求调整防抖延迟（如300-1000ms）。
• this绑定：自定义防抖函数需通过.apply(this)确保上下文正确。
• 立即执行：若需首次触发立即执行，可扩展防抖函数逻辑。

通过以上方法，可灵活应对Vue项目中需要防抖的场景。