Debounce и Throttle в TypeScript/JavaScript

Типизированные функции debounce и throttle для оптимизации обработчиков событий. Debounce откладывает выполнение до паузы, throttle ограничивает частоту вызовов.

// Debounce: выполняет функцию после паузы в вызовах
function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  let timeoutId: ReturnType<typeof setTimeout>;

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

// Throttle: выполняет функцию не чаще чем раз в delay
function throttle<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {
  let lastCall = 0;

  return function (...args: Parameters<T>) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      fn(...args);
    }
  };
}

Usage:

// Поиск с debounce (выполняется после паузы в 300ms)
const searchInput = document.querySelector("#search");
const debouncedSearch = debounce((query: string) => {
  console.log("Searching for:", query);
}, 300);

searchInput?.addEventListener("input", (e) => {
  debouncedSearch((e.target as HTMLInputElement).value);
});

// Скролл с throttle (не чаще раза в 100ms)
const throttledScroll = throttle(() => {
  console.log("Scroll position:", window.scrollY);
}, 100);

window.addEventListener("scroll", throttledScroll);

Notes:

• Debounce — для поиска, валидации форм (выполняется после паузы)
• Throttle — для скролла, resize, mousemove (выполняется с интервалом)
• TypeScript типы сохраняют сигнатуру оригинальной функции