@debounce
The @debounce decorator delays a method until a specified time has passed since its last invocation. Use it to reduce redundant work when a handler is triggered in bursts, such as typing, resize, scroll, autosave, or analytics.
Usage
import { RadiantElement, customElement, debounce, onEvent } from '@ecopages/radiant';
@customElement('search-input')
export class SearchInput extends RadiantElement {
@debounce(300)
performSearch(query: string) {
console.log('Searching for:', query);
}
@onEvent({ selector: 'input', type: 'input' })
handleInput(event: InputEvent) {
const query = (event.target as HTMLInputElement).value;
this.performSearch(query);
}
}Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
delay | number | Yes | Delay in milliseconds before execution. |
Common Use Cases
Window Resize
@customElement('responsive-chart')
export class ResponsiveChart extends RadiantElement {
@debounce(250)
updateDimensions() {
this.redrawChart();
}
@onEvent({ window: true, type: 'resize' })
handleResize() {
this.updateDimensions();
}
}Auto-Save
@debounce(2000)
async saveContent() {
await fetch('/api/save', {
method: 'POST',
body: JSON.stringify({ content: this.content }),
});
}
@onEvent({ selector: 'textarea', type: 'input' })
handleInput(event: InputEvent) {
this.content = (event.target as HTMLTextAreaElement).value;
this.saveContent();
}Guidelines for Delays
| Use Case | Recommended Delay | Reasoning |
|---|---|---|
| Search input | 300-500ms | Balance responsiveness with fewer duplicate searches. |
| Window resize | 200-300ms | Let layout settle before recomputing expensive work. |
| Auto-save | 1000-3000ms | Batch edits and reduce server chatter. |