【前端】vue 防抖和节流

在 Vue.js 中，防抖（Debounce） 和 节流（Throttle） 是优化高频事件（如输入、滚动、点击）的核心技术，可显著提升性能与用户体验。以下是具体实现方法和最佳实践：

---

⏳ 一、防抖（Debounce）

定义：事件触发后延迟执行函数，若在延迟时间内再次触发，则重新计时（只执行最后一次）。
适用场景：搜索框输入联想、窗口大小调整。

实现方式：

1. 手动实现

   function debounce(func, delay = 300) {let timeout;return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => func.apply(this, args), delay);};
   }
   

2. 在 Vue 组件中使用

   methods: {handleInput: debounce(function(event) {console.log('搜索关键词:', event.target.value); // 实际调用 API 或处理逻辑}, 500) // 延迟 500ms
   }
   

   <template><input @input="handleInput" placeholder="输入关键词搜索" />
   </template>
   

---

⚡ 二、节流（Throttle）

定义：在指定时间间隔内，无论事件触发多少次，函数只执行一次。
适用场景：滚动加载更多、按钮防重复点击。

实现方式：

1. 手动实现

   function throttle(func, limit = 1000) {let inThrottle;return function(...args) {if (!inThrottle) {func.apply(this, args);inThrottle = true;setTimeout(() => inThrottle = false, limit);}};
   }
   

2. 在 Vue 组件中使用

   methods: {handleClick: throttle(function() {console.log('提交订单时间:', new Date()); // 实际提交逻辑}, 2000) // 2 秒内只执行一次
   }
   

   <template><button @click="handleClick">提交订单</button>
   </template>
   

---

🔧 三、进阶实现方案

1. 使用第三方库（推荐）

• 安装 Lodash：

  npm install lodash
  

• 在组件中调用：

  import { debounce, throttle } from 'lodash';export default {methods: {search: debounce(() => { /* API 调用 */ }, 300),scrollHandler: throttle(() => { /* 滚动加载逻辑 */ }, 200)}
  };
  

2. 自定义全局指令

适用于按钮节流等复用场景：

// main.js
Vue.directive('throttle-click', {inserted(el, binding) {let lastTime = 0;el.addEventListener('click', () => {const now = Date.now();if (now - lastTime >= (binding.arg || 1000)) {binding.value(); // 执行绑定函数lastTime = now;}});}
});

<template><button v-throttle-click:2000="submit">防重复提交</button>
</template>

---

📊 四、防抖 vs 节流：核心区别与场景对比

特性	防抖（Debounce）	节流（Throttle）
执行时机	事件停止触发后执行	固定时间间隔执行一次
适用场景	搜索联想、输入验证	滚动加载、按钮防重
用户感知	响应延迟，但减少无效请求	即时响应但限制频率

---

🛠️ 五、最佳实践

1. 优先使用 Lodash：避免重复造轮子，其实现经过严格测试。
2. 组件销毁时清理定时器：在 beforeDestroy 生命周期中清除未执行函数：

   beforeDestroy() {this.handleScroll.cancel(); // Lodash 节流函数需手动取消
   }
   

3. 平衡时间间隔：
   • 防抖延迟建议 300ms（输入场景）；
   • 节流间隔建议 200ms（滚动事件）或 1000ms（按钮点击）。
4. 避免过度优化：非高频事件无需强制使用，以免增加复杂度。

---

通过合理应用防抖与节流，可有效解决搜索联想、滚动加载、按钮防重等高频交互的性能问题。根据场景选择合适方案，结合第三方库或自定义指令提升开发效率。