В чем разница между Debounce и вызовом функции через Delay?

Разница между Debounce и Delay

Debounce и Delay - это два разных подхода к управлению частотой вызова функций, но они работают по-разному и используются в разных сценариях.

Delay (Простая задержка)

Delay - это просто отложенный вызов функции на определённое время. Функция всегда будет вызвана через N миллисекунд, независимо от количества событий.

function delay(func, ms) {
  return function(...args) {
    setTimeout(() => func(...args), ms);
  };
}

const handleSearch = delay(() => {
  console.log("Поиск выполнен");
}, 1000);

// Вызовется 5 раз через 1 сек, итого 5 запросов!
for (let i = 0; i < 5; i++) {
  handleSearch();
}

В этом примере функция выполнится 5 раз - каждый вызов создаёт свой собственный таймер.

Debounce (Отскок)

Debounce - это умная задержка. Функция выполняется только один раз, после того как события прекратились. Если событие происходит снова, таймер перезапускается.

function debounce(func, ms) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), ms);
  };
}

const handleSearch = debounce(() => {
  console.log("Поиск выполнен");
}, 1000);

// Функция вызовется только ОДИН раз через 1 сек!
for (let i = 0; i < 5; i++) {
  handleSearch();
}

Здесь функция выполнится только один раз - предыдущие таймеры отменяются.

Практический пример: поле поиска

const input = document.querySelector("input");

// С Delay - много запросов
const delayedSearch = delay(query => {
  fetch(`/api/search?q=${query}`);
}, 1000);

input.addEventListener("input", (e) => {
  delayedSearch(e.target.value);
  // При вводе "hello" буква за буквой:
  // h -> запрос
  // e -> запрос
  // l -> запрос
  // l -> запрос
  // o -> запрос
  // Итого: 5 запросов!
});

// С Debounce - один запрос
const debouncedSearch = debounce(query => {
  fetch(`/api/search?q=${query}`);
}, 500);

input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
  // При вводе "hello" с задержкой:
  // h, e, l, l, o <- все эти события сбрасывают таймер
  // После паузы в 500мс -> запрос с "hello"
  // Итого: 1 запрос!
});

Таблица различий

Где использовать

Debounce используй для:

• Поиска по интернету (autocomplete, search)
• Валидации форм при вводе
• Сохранения автодрафтов
• Изменение размера окна (resize events)

Delay используй для:

• Аналитики (отправка событий)
• Простого отложенного выполнения
• Когда нужна гарантированная задержка

React пример

import { useCallback, useRef } from "react";

function useDebounce(callback, ms) {
  const timeoutRef = useRef();
  
  return useCallback((...args) => {
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => callback(...args), ms);
  }, [callback, ms]);
}

function SearchComponent() {
  const handleSearch = useDebounce((query) => {
    fetch(`/api/search?q=${query}`);
  }, 500);
  
  return (
    <input
      type="text"
      placeholder="Поиск..."
      onChange={(e) => handleSearch(e.target.value)}
    />
  );
}

Вывод

Debounce - умнее и экономнее. Она предотвращает множественные вызовы, накапливая события и вызывая функцию только после паузы. Delay - просто отложенный вызов, каждый раз по новой. Для асинхронных операций (API, поиск) почти всегда выбирай debounce.