【前端】vue 防抖和节流_vue debounce

在 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.jsVue.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 节流：核心区别与场景对比

🛠️ 五、最佳实践

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

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

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

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