useThrottleFn

v0.0.15testeddemo

Throttle execution of a function — a thin reactive wrapper around `@robonen/stdlib`'s `throttle`. Invokes `fn` at most once per `delay` window and resolves with the wrapped function's result. Especially useful for rate-limiting handlers on high-frequency events like `scroll` and `resize`. Accepts either positional arguments or a single options object, and exposes `cancel`/`flush` controls on the returned function.

Source Tests

Examples

const onScroll = useThrottleFn(() => updatePosition(), 100);
useEventListener('scroll', onScroll);

const save = useThrottleFn(persist, { delay: 1000, trailing: true });
save.cancel();

Demo

Loading demo…

Signatures

export function useThrottleFn<T extends AnyFunction>(
  fn: T,
  options: UseThrottleFnOptions,
): UseThrottleFnReturn<T>;

export function useThrottleFn<T extends AnyFunction>(
  fn: T,
  ms?: MaybeRefOrGetter<number>,
  trailing?: boolean,
  leading?: boolean,
  rejectOnCancel?: boolean,
): UseThrottleFnReturn<T>;

Type Parameters

Textends AnyFunction

Parameters

Parameter	Type	Default	Description
`fn`	`T`	—	The function to throttle
`ms`?	`MaybeRefOrGetter<number> \| UseThrottleFnOptions`	`200`	Window in milliseconds (can be reactive) or an options object
`trailing`?	`boolean`	`false`	Invoke on the trailing edge of the window
`leading`?	`boolean`	`true`	Invoke on the leading edge of the window
`rejectOnCancel`?	`boolean`	`false`	Reject a superseded/cancelled trailing promise instead of resolving it

Returns

UseThrottleFnReturn<T>The throttled function with `cancel` and `flush`