debounce

const

import { debounce } from '@daffodil/core'

A utility decorator that delays method execution until after a specified delay period has elapsed since the last invocation.

const debounce: (delay?: number) => MethodDecorator

Examples

Basic usage with custom delay

import { debounce } from '@daffodil/core';

class SearchComponent {
  @debounce(300)
  onSearchInput(value: string) {
    // Only executes after 300ms
    this.performSearch(value);
  }
}

Basic usage with custom delay

import { debounce } from '@daffodil/core';

class SearchComponent {
  @debounce(300)
  onSearchInput(value: string) {
    // Only executes after 300ms
    this.performSearch(value);
  }
}

Using default delay (100ms)

class MyComponent {
  @debounce() // Uses 100ms default
  onInputChange(value: string) {
    console.log('Input changed:', value);
  }
}

Using default delay (100ms)

class MyComponent {
  @debounce() // Uses 100ms default
  onInputChange(value: string) {
    console.log('Input changed:', value);
  }
}

Angular component integration

import { Component } from '@angular/core';
import { debounce } from '@daffodil/core';

@Component({
  selector: 'app-search',
  template: '<input (input)="onSearchInput($event.target.value)" />',
})
export class SearchComponent {
  @debounce(500)
  onSearchInput(value: string) {
    this.searchService.search(value);
  }
}

Angular component integration

import { Component } from '@angular/core';
import { debounce } from '@daffodil/core';

@Component({
  selector: 'app-search',
  template: '<input (input)="onSearchInput($event.target.value)" />',
})
export class SearchComponent {
  @debounce(500)
  onSearchInput(value: string) {
    this.searchService.search(value);
  }
}