使用异步节流回调
函数：useAsyncThrottledCallback()
ts
function useAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>
function useAsyncThrottledCallback<TFn>(fn, options): (...args) => Promise<ReturnType<TFn>>
定义于：react-pacer/src/async-throttler/useAsyncThrottledCallback.ts:42
一个 React hook，它创建异步回调函数的节流版本。此 hook 是 useAsyncThrottler hook 的便捷封装，为 React 组件提供了稳定、节流的异步函数引用。
节流的异步函数在指定的等待时间段内最多执行一次，无论调用多少次。如果在等待时间内被多次调用，只有第一次调用会执行，后续调用将被忽略，直到等待时间段结束。返回的函数总是返回一个 Promise，该 Promise 会解析或拒绝原始异步函数的结果。
与 useAsyncThrottler 相比，此 hook 提供了更简单的 API，非常适合基本的异步节流需求。但是，它不会暴露底层的 AsyncThrottler 实例。
对于需要以下功能的进阶用法
- 手动取消
- 访问执行/错误状态
- 自定义 useCallback 依赖项
考虑改用 useAsyncThrottler hook。
类型参数
• TFn extends AnyAsyncFunction
参数
fn
TFn
options
AsyncThrottlerOptions<TFn>
Returns (返回)
Function
参数
args
...Parameters<TFn>
Returns (返回)
Promise<ReturnType<TFn>>
示例
tsx
// Throttle an async API call
const handleApiCall = useAsyncThrottledCallback(async (data) => {
const result = await sendDataToServer(data);
return result;
}, {
wait: 200 // Execute at most once every 200ms
});
// Use in an event handler
<button onClick={() => handleApiCall(formData)}>Send</button>
// Throttle an async API call
const handleApiCall = useAsyncThrottledCallback(async (data) => {
const result = await sendDataToServer(data);
return result;
}, {
wait: 200 // Execute at most once every 200ms
});
// Use in an event handler
<button onClick={() => handleApiCall(formData)}>Send</button>
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。