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
- Throttle Window Resize
- Scroll Events
- Default Delay
const throttledResize = throttleAction(() => {
console.log('Resized!');
}, 300);
window.addEventListener('resize', throttledResize);
// Logs at most once every 300ms while resizing.
const throttledScroll = throttleAction((e: Event) => {
handleScroll(e);
}, 200);
window.addEventListener('scroll', throttledScroll);
const log = throttleAction(() => console.log('Ready!'));
// Uses default delay of 150ms
log();
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
Name | Type | Description |
---|---|---|
callback | VoidFunction | The function to throttle. |
delay | number | Delay in milliseconds (default: 150). |
Returns
A throttled version of the callback, invoked at most once per interval.
Key Features
- Generic: Works with any callback signature.
- Prevents Flooding: Ensures even spacing between calls.
- Custom or Default Interval: Default 150ms interval or specify custom.
Limitations
- No Trailing Calls: Only leading edge execution; trailing invocation is not supported.
- No Cancel/Flush: Does not support canceling or flushing scheduled calls.
- 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.
Recommended Use Cases
- 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.