防抖可减少商品筛选中的无效请求，其核心是延迟执行并重置计时器，每次操作清除旧定时器、重新计时，仅在用户停顿后执行查询；需手动清除定时器防止内存泄漏，并支持取消功能。
在商品多维筛选（如价格区间、品牌、分类、规格等）场景中，用户频繁输入或切换条件会触发大量无效请求。防抖能确保只在用户操作“停顿”后才发起最终查询，显著减少请求次数、降低服务压力、提升响应体验。
防抖核心逻辑：延迟执行，重置计时
每次用户修改筛选条件（比如拖动价格滑块、点击多选标签、输入搜索关键词），不立即查，而是启动一个定时器；若在设定时间内（如 300ms）又有新操作，就清除旧定时器、重新计时。只有当用户彻底“静止”够久，才真正执行查询。
关键点：
- 每次交互都调用同一防抖函数，它内部维护唯一定时器 ID
- 必须在组件卸载或条件变更前手动清除定时器（避免内存泄漏或执行过期逻辑）
- 防抖函数应返回可取消的控制方法（尤其在 React/Vue 等框架中）
手写基础防抖函数（支持取消）
不依赖 Lodash，便于理解与定制：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, wait) {
let timeoutId = null;
const debounced = function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, wait);
};
// 提供手动取消能力
debounced.cancel = () => {
clearTimeout(timeoutId);
timeoutId = null;
};
return debounced;
}
使用示例（监听多个筛选字段变化）：
const handleFilterChange = debounce(() => {
const filters = getActiveFilters(); // 收集当前所有选中条件
fetchProducts(filters); // 发起真实请求
}, 300);
// 所有筛选控件（input、checkbox、range、select）都绑定这个函数
priceRange.addEventListener('input', handleFilterChange);
brandCheckboxes.forEach(cb => cb.addEventListener('change', handleFilterChange));
searchInput.addEventListener('input', handleFilterChange);
结合 React Hook 的安全用法（推荐）
在函数组件中，需确保防抖函数绑定最新 state/props，并在组件卸载时清理：
import { useState, useEffect, useCallback } from 'react';
function ProductFilter() {
const [filters, setFilters] = useState({ price: [], brand: [], category: [] });
// useCallback 确保 handleSearch 不随渲染重生成
const handleSearch = useCallback(debounce(() => {
fetchProducts(filters); // 注意：此处 filters 是闭包捕获的旧值 → 需用 useRef 或传参修正
}, 300), []);
// ✅ 更稳妥方式：把参数显式传入防抖函数
const debouncedFetch = useCallback(
debounce((currentFilters) => {
fetchProducts(currentFilters);
}, 300),
[]
);
useEffect(() => {
debouncedFetch(filters);
return () => debouncedFetch.cancel(); // 卸载时取消待执行任务
}, [filters, debouncedFetch]);
// ... 渲染筛选 UI，onChange 调用 setFilters 触发 effect
}
进阶建议：区分轻重操作，按需防抖
不是所有筛选行为都适合统一防抖：
- 输入类（搜索框、数值输入）：必须防抖，延迟 200–400ms
- 开关类（单选按钮、启用/禁用）：可设更短延迟（100ms）或直接执行（无感）
- 重操作（导出、批量应用）：禁用防抖，加 loading 和确认提示
- 可为不同字段配置独立防抖实例，避免相互干扰
例如价格滑块拖动高频，但分类下拉选择低频，二者可分别防抖，互不影响。
