js实现传参的防抖函数

### Vue 中使用 Lodash 的 `throttle` 和 `debounce` 函数传递参数 在 Vue 应用中，当需要对频繁触发的事件（如输入框变化、窗口调整大小等）进行控制时，可以利用 Lodash 提供的 `throttle` 或者 `debounce` 方法来实现节流或防抖效果。这些方法不仅可以用于无参函数，还可以处理带有参数的情况。 #### 1. 使用 `throttle` 对于希望限制调用频率的操作来说，可以通过如下方式定义并绑定一个带参数的节流函数： ```javascript import _ from 'lodash'; export default { data() { return { message: '' } }, methods: { // 定义原始函数，并接受额外参数 handleInput(value) { this.message = value; console.log(`Updated message to ${value}`); }, // 创建节流版本的方法，在组件创建时初始化 created() { this.throttledHandleInput = _.throttle(this.handleInput.bind(this), 1000); } } } ``` 在此例子中，每当用户输入新内容时都会触发 `handleInput` 方法，但由于被包裹成了 `throttledHandleInput` ，因此即使连续快速打字也只会每秒更新一次消息[^1]。 #### 2. 使用 `debounce` 同样地，也可以为那些只需要响应最后一次操作的功能设置延迟执行时间，比如搜索建议功能： ```javascript import _ from 'lodash'; export default { data() { return { query: '', results: [] }; }, watch: { // 当查询字符串发生变化时启动防抖机制 query(newQuery) { this.debouncedSearchSuggestions(newQuery); } }, mounted() { // 初始化防抖后的搜索建议函数 this.debouncedSearchSuggestions = _.debounce((query) => { fetch(`/api/search?q=${encodeURIComponent(query)}`) .then(response => response.json()) .then(data => (this.results = data)); }, 500); } }; ``` 这里展示了如何监听 `query` 属性的变化，并通过 `_.debounce()` 来确保只有当停止键入半秒钟后才会发起实际的数据请求[^3]。 #### 3. 结合事件处理器使用 有时可能还需要直接将此类函数作为事件回调的一部分注册给 DOM 元素或其他对象。此时可以直接传入已经配置好的节流/防抖实例即可： ```html <template> <div @scroll="onScroll"> <!-- 内容 --> </div> </template> <script> import _ from 'lodash'; export default { methods: { onScroll(event) { console.log('Scrolled!', event.target.scrollTop); } }, created() { // 将原生滚动事件替换为经过节流处理的新版 this.onScroll = _.throttle(this.onScroll, 200); // 如果是防抖，则改为： // this.onScroll = _.debounce(this.onScroll, 200); } }; </script> ``` 上述代码片段说明了怎样把自定义的 `onScroll` 处理器转换成节流形式后再赋值回去，从而达到减少不必要的计算开销的目的[^4]。