DebounceCallback
Creates a debounced version of a callback function. The callback will only be executed after the specified wait time has elapsed since the last invocation.
Stateless utility
debounceCallback is a stateless utility that only delays callback execution. For cases where you need to manage state transitions, consider using the debounced utility instead, which provides a reactive signal that tracks debounced state changes.
Usage
angular-ts
import { Component, output } from '@angular/core';
import { debounceCallback } from '@signality/core';
@Component({
template: `
<input (input)="handleInput($event.target.value)" />
`,
})
export class SearchComponent {
readonly debounceTime = input(300);
readonly searchChange = output<string>();
readonly handleInput = debounceCallback((value: string) => {
this.searchChange.emit(value);
}, this.debounceTime);
}Parameters
| Parameter | Type | Description |
|---|---|---|
callback | T extends (...args: any[]) => any | The function to debounce |
wait | MaybeSignal<number> | Debounce delay in milliseconds |
options | WithInjector | Optional configuration (see Options below) |
Options
| Option | Type | Default | Description |
|---|---|---|---|
injector | Injector | - | Optional injector for DI context |
Return Value
Returns a debounced version of the callback function with the same signature.
SSR Compatibility
On the server, debounceCallback returns the original callback function unchanged. No debouncing occurs, and the function executes immediately.
Type Definitions
typescript
function debounceCallback<T extends (...args: any[]) => any>(
callback: T,
wait: MaybeSignal<number>,
options?: WithInjector
): T;Related
- Debounced — Debounced signal wrapper
- ThrottleCallback — Throttled callback function
- Throttled — Throttled signal wrapper