Вопрос с собеседования · Frontend

Чем debounce отличается от throttle?

JuniorАсинхронность и event loop
Ещё спрашивают так:
  • Как не отправлять запрос на каждое нажатие клавиши в поиске?
Коротко

Debounce — вызвать функцию, только когда события прекратились на N мс: поиск по вводу, сохранение черновика, resize. Throttle — вызывать не чаще раза в N мс, пока события идут: прокрутка, движение мыши, отслеживание позиции.

  • Обе реализуются через замыкание с таймером
  • Debounce с leading — вызвать сразу и игнорировать остальное в окне
  • Для анимаций лучше requestAnimationFrame

А ещё Отменять устаревшие запросы поиска — AbortController, иначе ответы придут не по порядку

Подробно

Debounce каждый новый вызов сбрасывает таймер: функция сработает через N мс после последнего события. При непрерывном потоке событий не сработает ни разу — для поиска это и нужно.

Throttle гарантирует регулярные вызовы во время потока событий, пропуская лишние. Реализации отличаются: вызывать ли в начале окна, в конце или в обоих местах.

В React функцию оборачивают в useMemo или useRef, иначе на каждом рендере создаётся новый debounce со своим таймером.

Пример

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

function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); }
  };
}

input.addEventListener("input", debounce(e => search(e.target.value), 300));

Что хотят услышать

  • Различие и примеры применения.
  • Реализация через замыкание и таймер.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Debounce — вызов после паузы в событиях, throttle — не чаще раза в N мс
  • ✗Debounce — вызов не чаще раза в N мс, throttle — вызов только после паузы в событиях
  • ✗Throttle ждёт, пока события прекратятся
  • ✗Это синонимы: оба просто откладывают вызов функции

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования