Skip to main content

Throttle Function

Creates a throttled version of a callback that ensures it executes at most once every specified interval. Ideal for controlling calls on rapid, repeat events like scrolling or resizing.


Import

import { throttleAction } from 'nhb-toolbox';

Function Signature

function throttleAction<T extends VoidFunction>( callback: T, delay?: number): ThrottledFn<T>

Usage Examples

const throttledResize = throttleAction(() => {
console.log('Resized!');
}, 300);

window.addEventListener('resize', throttledResize);
// Logs at most once every 300ms while resizing.

API Reference

Type Definitions

/** Generic function type that returns `void` */
type VoidFunction = (...args: any[]) => void;

/** Debounced function type after certain delay */
type ThrottledFn<T extends VoidFunction> = (...args: Parameters<T>) => void;

Parameters

NameTypeDescription
callbackVoidFunctionThe function to throttle.
delaynumberDelay in milliseconds (default: 150).

Returns

A throttled version of the callback, invoked at most once per interval.


Key Features

  1. Generic: Works with any callback signature.
  2. Prevents Flooding: Ensures even spacing between calls.
  3. Custom or Default Interval: Default 150ms interval or specify custom.

Limitations

  1. No Trailing Calls: Only leading edge execution; trailing invocation is not supported.
  2. No Cancel/Flush: Does not support canceling or flushing scheduled calls.
  3. No Context Retention: this is not bound or managed.

Notes

  • Use throttle for scroll, resize, or mouse-move events to protect performance.
  • Use debounce for “do X after no more triggers”; throttle for “do X at regular intervals”.
  • Please refer to debounceAction to debounce an action or function.

  • Window resize or scroll listeners.
  • Animation frame limiting.
  • Preventing button mashing event floods.

Conclusion:
throttleAction is the go-to for managing high-frequency events and protecting performance in your web apps.