lodash 防抖

### Lodash `debounce` 的实现原理 Lodash 的 `debounce` 函数通过延迟函数的执行来防止短时间内多次调用。其核心机制是使用一个计时器（`setTimeout`），在每次触发函数时重置该计时器，直到最后一次触发后经过指定的时间内没有再次触发，才会真正执行目标函数。 具体实现逻辑如下： 1. **创建计时器变量**：用于存储当前的定时器 ID。 2. **返回包装函数**：每次调用时清除之前的定时器，并重新设置一个新的定时器。 3. **执行函数**：当定时器到期时，执行原始函数并传递正确的上下文和参数。 简化版的 `debounce` 实现示例如下： ```javascript function debounce(func, delay) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, delay); }; } ``` 上述代码中，`clearTimeout(timeout)` 确保了在每次调用包装后的函数时，之前的定时任务都会被取消，从而避免重复执行。只有在最后一次调用后经过指定的 `delay` 时间内未再被调用的情况下，`func.apply(context, args)` 才会被执行[^1]。 --- ### Lodash `debounce` 的使用方法 Lodash 提供了一个经过优化且功能丰富的 `debounce` 方法，可以直接导入并使用。以下是基本的使用步骤： #### 安装与导入 首先需要安装 Lodash 包： ```bash npm install lodash ``` 然后在代码中导入所需的模块： ```javascript import _ from 'lodash'; ``` #### 基本使用示例 以下是一个简单的防抖输入框搜索示例： ```javascript const handleInput = _.debounce((e) => { console.log('防抖触发：', e.target.value); }, 500); document.getElementById('search').addEventListener('input', handleInput); ``` 在这个例子中，每当用户在输入框中输入内容时，`handleInput` 函数会被调用，但实际的 `console.log` 操作只会在用户停止输入 500 毫秒后执行。这样可以有效减少频繁的请求或计算操作[^2]。 #### 高级选项 Lodash 的 `debounce` 还支持额外的配置选项，允许更灵活地控制行为： - **leading**: 如果为 `true`，则在延迟开始前立即执行一次函数。 - **trailing**: 如果为 `true`，则在延迟结束后执行一次函数。 示例： ```javascript const debouncedFunction = _.debounce( (value) => { console.log('Debounced value:', value); }, 300, { leading: true, trailing: false } ); debouncedFunction('first call'); // 立即输出 "Debounced value: first call" debouncedFunction('second call'); // 不会立即输出 ``` 在这个例子中，由于设置了 `{ leading: true, trailing: false }`，第一次调用会立即执行，而后续调用则不会在延迟结束后执行[^3]。 --- ### 在 Vue 中使用 Lodash `debounce` 在 Vue 应用中，尤其是使用 Composition API (`<script setup>`) 时，可以通过 `lodash-es` 模块进行按需引入以提高性能。 #### 安装与导入 ```bash npm install lodash-es ``` ```vue <script setup> import { debounce } from 'lodash-es'; </script> ``` #### 使用示例 假设有一个输入框需要绑定防抖逻辑： ```vue <template> <input @input="update" placeholder="请输入..." /> </template> <script setup> import { debounce } from 'lodash-es'; const update = debounce((e) => { console.log('防抖更新:', e.target.value); }, 100); </script> ``` 在这个例子中，每当用户在输入框中输入内容时，`update` 函数会被调用，但实际的 `console.log` 操作只会在用户停止输入 100 毫秒后执行。这种做法特别适用于处理高频率事件（如输入、滚动等）中的昂贵操作[^4]。 --- ### 总结 Lodash 的 `debounce` 是一种强大的工具，能够帮助开发者轻松实现防抖逻辑。它不仅简化了开发流程，还提供了丰富的配置选项，满足不同场景下的需求。无论是基础的 JavaScript 项目还是基于 Vue 等框架的应用，都可以方便地集成和使用。 ---