使用异步防抖回调
函数: useAsyncDebouncedCallback()
ts
function useAsyncDebouncedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>
function useAsyncDebouncedCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>
定义于: react-pacer/src/async-debouncer/useAsyncDebouncedCallback.ts:44
一个 React hook，用于创建一个异步回调函数的防抖版本。该 hook 是对 useAsyncDebouncer hook 的便捷封装，为 React 组件提供了一个稳定、防抖的异步函数引用。
防抖的异步函数将在距离上次调用指定的等待时间结束后执行。如果在等待时间过期之前再次调用，计时器将重置并重新开始等待。返回的函数始终返回一个 Promise，该 Promise 会解析或拒绝原始异步函数的结果。
与 useAsyncDebouncer 相比，此 hook 提供了更简单的 API，非常适合基本异步防抖需求。但是，它不暴露底层的 AsyncDebouncer 实例。
对于需要以下功能的进阶用法
- 手动取消
- 访问执行/错误状态
- 自定义 useCallback 依赖项
请考虑改用 useAsyncDebouncer hook。
类型参数
• TFn extends AnyAsyncFunction
参数
fn
TFn
options
AsyncDebouncerOptions<TFn>
Returns (返回)
Function
参数
args
...Parameters<TFn>
Returns (返回)
Promise<ReturnType<TFn>>
示例
tsx
// Debounce an async search handler
const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
const results = await fetchSearchResults(query);
return results;
}, {
wait: 500 // Wait 500ms between executions
});
// Use in an input
<input
type="search"
onChange={e => handleSearch(e.target.value)}
/>
// Debounce an async search handler
const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
const results = await fetchSearchResults(query);
return results;
}, {
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 万开发者。