使用防抖回调
函数：useDebouncedCallback()
ts
function useDebouncedCallback<TFn>(fn, options): (...args) => void
function useDebouncedCallback<TFn>(fn, options): (...args) => void
定义于：react-pacer/src/debouncer/useDebouncedCallback.ts:42
一个 React hook，用于创建一个回调函数的防抖版本。此 hook 本质上是 @tanstack/pacer 导出的基本 debounce 函数的包装器，但针对 React 进行了优化，具有响应式选项和稳定的函数引用。
防抖函数将在自上次调用以来的指定等待时间结束后执行。如果在等待时间过期之前再次调用，计时器将重置并重新开始等待。
与 useDebouncer hook 相比，此 hook 提供了更简单的 API，非常适合基本的防抖需求。但是，它不暴露底层的 Debouncer 实例。
对于需要以下功能的进阶用法
- 手动取消
- 访问执行计数
- 自定义 useCallback 依赖项
考虑改用 useDebouncer hook。
类型参数
• TFn extends AnyFunction
参数
fn
TFn
options
DebouncerOptions<TFn>
Returns (返回)
Function
参数
args
...Parameters<TFn>
Returns (返回)
void
示例
tsx
// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
fetchSearchResults(query);
}, {
wait: 500 // Wait 500ms between executions
});
// Use in an input
<input
type="search"
onChange={(e) => handleSearch(e.target.value)}
/>
// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
fetchSearchResults(query);
}, {
wait: 500 // Wait 500ms between executions
});
// Use in an input
<input
type="search"
onChange={(e) => handleSearch(e.target.value)}
/>
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。