useThrottleFn

v0.0.14testeddemo

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