← Back to Snippets

typescript

Debounce Function

A reusable debounce utility to limit function execution rate

utility performance events

Debounce delays function execution until after a pause in calls. Perfect for search inputs, resize handlers, and API calls.

function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timeoutId: ReturnType<typeof setTimeout>;

  return (...args: Parameters<T>) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

Usage

// Search input - only fires 300ms after user stops typing
const handleSearch = debounce((query: string) => {
  fetch(`/api/search?q=${query}`);
}, 300);

input.addEventListener('input', (e) => {
  handleSearch(e.target.value);
});

When to Use

Search inputs: Avoid API calls on every keystroke
Window resize: Limit expensive layout calculations
Button clicks: Prevent double submissions
Scroll events: Throttle scroll-based animations