当前位置：首页 > VUE

vue实现防抖节流

2026-02-25 21:22:15VUE

防抖（Debounce）的实现

防抖的核心思想是在事件触发后延迟执行回调函数，若在延迟时间内再次触发事件，则重新计时。适用于输入框搜索、窗口大小调整等场景。

// 工具函数
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Vue中使用
export default {
  methods: {
    search: debounce(function(query) {
      // 实际搜索逻辑
      console.log('Searching:', query);
    }, 500)
  }
}

节流（Throttle）的实现

节流的核心思想是在固定时间间隔内只执行一次回调函数。适用于滚动事件、高频点击等场景。

// 工具函数
function throttle(fn, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

// Vue中使用
export default {
  methods: {
    handleScroll: throttle(function() {
      // 滚动处理逻辑
      console.log('Scrolling');
    }, 200)
  }
}

使用lodash库的便捷方案

对于复杂场景或需要更完善功能的实现，推荐使用lodash的防抖节流方法。

import { debounce, throttle } from 'lodash';

export default {
  created() {
    this.debouncedFn = debounce(this.actualMethod, 300);
    this.throttledFn = throttle(this.actualMethod, 300);
  },
  methods: {
    actualMethod() {
      // 业务逻辑
    }
  }
}

自定义指令实现

可以创建Vue自定义指令来复用防抖节流逻辑。

// 防抖指令
Vue.directive('debounce', {
  inserted(el, binding) {
    const [fn, event, delay] = binding.value;
    const debouncedFn = debounce(fn, delay || 300);
    el.addEventListener(event, debouncedFn);
  }
});

// 使用方式
<button v-debounce="[handleClick, 'click', 500]">点击</button>