useDebouncer
函数：useDebouncer()
ts
function useDebouncer<TFn>(fn, options): Debouncer<TFn>
function useDebouncer<TFn>(fn, options): Debouncer<TFn>
定义于：react-pacer/src/debouncer/useDebouncer.ts:42
一个 React 钩子，用于创建和管理 Debouncer 实例。
这是一个较低级别的钩子，可直接访问 Debouncer 的功能，而无需 任何内置的状态管理。这使您可以将其与任何您喜欢的状态管理解决方案 （useState、Redux、Zustand 等）集成。
此钩子提供防抖功能，以限制函数的调用频率， 在执行最新调用之前等待指定的延迟。这对于处理 诸如窗口大小调整、滚动事件或实时搜索输入等频繁事件非常有用。
防抖器仅在自上次调用以来经过指定的等待时间后才执行函数。 如果在等待时间到期之前再次调用该函数，则计时器将重置并重新开始等待。
类型参数
• TFn extends AnyFunction
参数
fn
TFn
options
DebouncerOptions<TFn>
返回
Debouncer<TFn>
示例
tsx
// 对搜索函数进行防抖以限制 API 调用
const searchDebouncer = useDebouncer(
(query: string) => fetchSearchResults(query),
{ wait: 500 } // 最后一次按键后等待 500 毫秒
);
// 在事件处理程序中
const handleChange = (e) => {
searchDebouncer.maybeExecute(e.target.value);
};
// 获取防抖函数已执行的次数
const executionCount = searchDebouncer.getExecutionCount();
// 获取挂起状态
const isPending = searchDebouncer.getIsPending();
// 对搜索函数进行防抖以限制 API 调用
const searchDebouncer = useDebouncer(
(query: string) => fetchSearchResults(query),
{ wait: 500 } // 最后一次按键后等待 500 毫秒
);
// 在事件处理程序中
const handleChange = (e) => {
searchDebouncer.maybeExecute(e.target.value);
};
// 获取防抖函数已执行的次数
const executionCount = searchDebouncer.getExecutionCount();
// 获取挂起状态
const isPending = searchDebouncer.getIsPending();
