useDebouncedCallback
函数：useDebouncedCallback()
ts
function useDebouncedCallback<TFn>(fn, options): (...args) => void
function useDebouncedCallback<TFn>(fn, options): (...args) => void
定义于：react-pacer/src/debouncer/useDebouncedCallback.ts:42
一个 React 钩子，用于创建回调函数的防抖版本。 此钩子本质上是 @tanstack/pacer 导出的基本 debounce 函数的包装器， 但针对 React 进行了优化，具有响应式选项和稳定的函数引用。
���抖函数仅在自上次调用以来经过指定的等待时间后才会执行。 如果在等待时间到期之前再次调用，计时器将重置并重新开始等待。
与 useDebouncer 相比，此钩子提供了更简单的 API，使其非常适合基本的防抖需求。 但是，它不公开底层的 Debouncer 实例。
对于需要以下功能的高级用法：
- 手动取消
- 访问执行计数
- 自定义 useCallback 依赖项
请考虑改用 useDebouncer 钩子。
类型参数
• TFn extends AnyFunction
参数
fn
TFn
options
DebouncerOptions<TFn>
返回
Function
参数
args
...Parameters<TFn>
返回
void
示例
tsx
// 防抖搜索处理程序
const handleSearch = useDebouncedCallback((query: string) => {
fetchSearchResults(query);
}, {
wait: 500 // 每次执行之间等待 500 毫秒
});
// 在输入中使用
<input
type="search"
onChange={(e) => handleSearch(e.target.value)}
/>
// 防抖搜索处理程序
const handleSearch = useDebouncedCallback((query: string) => {
fetchSearchResults(query);
}, {
wait: 500 // 每次执行之间等待 500 毫秒
});
// 在输入中使用
<input
type="search"
onChange={(e) => handleSearch(e.target.value)}
/>
