createDebouncer
Function: createDebouncer()
function createDebouncer<TFn>(fn, initialOptions): SolidDebouncer<TFn>
function createDebouncer<TFn>(fn, initialOptions): SolidDebouncer<TFn>
Defined in: debouncer/createDebouncer.ts:53
A Solid hook that creates and manages a Debouncer instance.
This is a lower-level hook that provides direct access to the Debouncer's functionality without any built-in state management. This allows you to integrate it with any state management solution you prefer (createSignal, Redux, Zustand, etc.).
This hook provides debouncing functionality to limit how often a function can be called, waiting for a specified delay before executing the latest call. This is useful for handling frequent events like window resizing, scroll events, or real-time search inputs.
The debouncer will only execute the function after the specified wait time has elapsed since the last call. If the function is called again before the wait time expires, the timer resets and starts waiting again.
Type Parameters
• TFn extends AnyFunction
Parameters
fn
TFn
initialOptions
DebouncerOptions<TFn>
Returns
SolidDebouncer<TFn>
Example
// Debounce a search function to limit API calls
const debouncer = createDebouncer(
(query: string) => fetchSearchResults(query),
{ wait: 500 } // Wait 500ms after last keystroke
);
// In an event handler
const handleChange = (e) => {
debouncer.maybeExecute(e.target.value);
};
// Access debouncer state via signals
console.log('Executions:', debouncer.executionCount());
console.log('Is pending:', debouncer.isPending());
// Update options
debouncer.setOptions({ wait: 1000 });
// Debounce a search function to limit API calls
const debouncer = createDebouncer(
(query: string) => fetchSearchResults(query),
{ wait: 500 } // Wait 500ms after last keystroke
);
// In an event handler
const handleChange = (e) => {
debouncer.maybeExecute(e.target.value);
};
// Access debouncer state via signals
console.log('Executions:', debouncer.executionCount());
console.log('Is pending:', debouncer.isPending());
// Update options
debouncer.setOptions({ wait: 1000 });
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.