Vue 中的防抖和节流，如何实现？

Vue中的防抖与节流：原理、实现与最佳实践

---

一、核心概念与区别

1. 防抖（Debounce）
防抖的核心是 延迟执行，当高频事件触发时，只有在事件停止触发后的指定时间间隔内不再有新事件，才会执行目标函数。
典型场景：搜索框输入联想、窗口resize事件。

2. 节流（Throttle）
节流的本质是 稀释执行频率，无论事件触发多频繁，目标函数在指定时间间隔内只会执行一次。
典型场景：滚动加载更多、按钮频繁点击的提交保护。

区别总结：

特性	防抖	节流
触发条件	事件停止后执行	固定间隔执行
执行次数	最后一次触发有效	每个间隔内至少执行一次
适用场景	输入联想、搜索	滚动事件、高频点击

---

二、手动实现与Vue集成

1. 防抖实现（原生JavaScript）

/**
 * 防抖函数
 * @param {Function} fn 目标函数
 * @param {number} delay 延迟时间（毫秒）
 * @returns {Function} 包装后的防抖函数
 */
function debounce(fn, delay = 300) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer); // 清除旧定时器
    timer = setTimeout(() => {
      fn.apply(this, args); // 确保this指向正确
      timer = null;
    }, delay);
  };
}

Vue组件中使用防抖：

2. 节流实现（原生JavaScript）

/**
 * 节流函数
 * @param {Function} fn 目标函数
 * @param {number} interval 时间间隔（毫秒）
 * @returns {Function} 包装后的节流函数
 */
function throttle(fn, interval = 1000) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args); // 确保this指向正确
      lastTime = now;
    }
  };
}

Vue组件中使用节流：

---

三、日常开发建议

1. 合理选择时间间隔

• 防抖：输入类场景建议300-500ms，避免用户输入卡顿。
• 节流：滚动或动画场景建议16ms（接近60FPS）或100ms（保守节流）。

2. 使用Vue自定义指令封装

将防抖/节流逻辑封装为可复用的指令：

// 防抖指令 v-debounce
Vue.directive('debounce', {
  inserted(el, binding) {
    const [fn, event, delay] = binding.value;
    const debouncedFn = debounce(fn, delay);
    el.addEventListener(event, debouncedFn);
    el._debouncedFn = debouncedFn; // 保存引用以便移除
  },
  unbind(el, binding) {
    const [_, event] = binding.value;
    el.removeEventListener(event, el._debouncedFn);
  }
});

// 使用示例

3. 第三方库优化（Lodash）

直接使用Lodash的debounce和throttle：

import { debounce, throttle } from 'lodash';

export default {
  methods: {
    handleSearch: debounce(function() { /* ... */ }, 500),
    handleScroll: throttle(function() { /* ... */ }, 100)
  }
};

---

四、注意事项

1. 内存泄漏问题

手动实现的防抖/节流需在组件销毁时清除定时器：

export default {
  data() {
    return {
      timer: null
    };
  },
  methods: {
    handleResize() {
      this.timer = setTimeout(() => {
        // 业务逻辑
      }, 300);
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer); // 清除未执行的定时器
  }
};

2. 参数传递与this绑定

确保防抖/节流函数内this指向Vue实例：

// 错误示例：直接调用导致this丢失
const debouncedFn = debounce(this.fetchData, 500);
button.addEventListener('click', debouncedFn); // this可能指向window

// 正确做法：使用箭头函数或bind
button.addEventListener('click', () => debouncedFn.call(this));

3. 避免过度节流

过长的间隔会导致用户体验下降（如按钮点击无响应），需根据场景平衡性能与体验。

---

五、实际案例

场景：无限滚动加载

关键点：

• 使用节流控制滚动事件频率
• 组件销毁时取消未执行的节流调用
• 避免重复加载的状态锁（isLoading）

---

六、总结

防抖与节流是优化高频事件的核心手段，正确使用可显著提升应用性能与用户体验。在Vue中，推荐以下实践：

1. 优先使用Lodash：避免重复造轮子，其实现经过严格测试。
2. 封装为指令或工具函数：提升代码复用性。
3. 严格管理生命周期：组件销毁时清理定时器或取消未执行函数。
4. 平衡时间间隔：根据场景调整防抖/节流阈值，避免过度优化。

通过合理应用这两种技术，可以有效解决搜索联想、滚动加载、按钮防重等高频场景的性能问题。