使用节流回调
函数: useThrottledCallback()
ts
function useThrottledCallback<TFn>(fn, options): (...args) => void
function useThrottledCallback<TFn>(fn, options): (...args) => void
定义于: react-pacer/src/throttler/useThrottledCallback.ts:43
一个 React hook，用于创建一个回调函数的节流版本。此 hook 基本上是对从 @tanstack/pacer 导出的基本 throttle 函数的封装，但针对 React 进行了优化，具有响应式选项和稳定的函数引用。
节流函数将在指定的等待时间段内最多执行一次，无论调用多少次。如果在等待期间被多次调用，只有第一次调用会执行，后续的调用将被忽略，直到等待时间段结束。
与 useThrottler hook 相比，此 hook 提供了更简单的 API，非常适合基本节流需求。但是，它不会暴露底层的 Throttler 实例。
对于需要以下功能的进阶用法
- 手动取消
- 访问执行计数
- 自定义 useCallback 依赖项
请考虑改用 useThrottler hook。
类型参数
• TFn extends AnyFunction
参数
fn
TFn
options
ThrottlerOptions<TFn>
Returns (返回)
Function
参数
args
...Parameters<TFn>
Returns (返回)
void
示例
tsx
// Throttle a window resize handler
const handleResize = useThrottledCallback(() => {
updateLayoutMeasurements();
}, {
wait: 100 // Execute at most once every 100ms
});
// Use in an event listener
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
// Throttle a window resize handler
const handleResize = useThrottledCallback(() => {
updateLayoutMeasurements();
}, {
wait: 100 // Execute at most once every 100ms
});
// Use in an event listener
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。