useThrottledCallback
函数：useThrottledCallback()
ts
function useThrottledCallback<TFn, TArgs>(fn, options): (...args) => void
function useThrottledCallback<TFn, TArgs>(fn, options): (...args) => void
定义于：react-pacer/src/throttler/useThrottledCallback.ts:43
一个 React 钩子，用于创建回调函数的节流版本。 此钩子本质上是 @tanstack/pacer 导出的基本 throttle 函数的包装器， 但针对 React 进行了优化，具有响应式选项和稳定的函数引用。
节流函数在指定��等待时间内最多执行一次， 无论它被调用多少次。如果在等待期间多次调用， 只有第一次调用会执行，后续调用将被忽略，直到等待期结束。
与 useThrottler 相比，此钩子提供了更简单的 API，使其非常适合基本的节流需求。 但是，它不公开底层的 Throttler 实例。
对于需要以下功能的高级用法：
- 手动取消
- 访问执行计数
- 自定义 useCallback 依赖项
请考虑改用 useThrottler 钩子。
类型参数
• TFn extends AnyFunction
• TArgs extends any[]
参数
fn
TFn
options
ThrottlerOptions<TFn>
返回
Function
参数
args
...TArgs
返回
void
示例
tsx
// 节流窗口大小调整处理程序
const handleResize = useThrottledCallback(() => {
updateLayoutMeasurements();
}, {
wait: 100 // 每 100 毫秒最多执行一次
});
// 在事件侦听器中使用
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
// 节流窗口大小调整处理程序
const handleResize = useThrottledCallback(() => {
updateLayoutMeasurements();
}, {
wait: 100 // 每 100 毫秒最多执行一次
});
// 在事件侦听器中使用
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
