Що робить "throttle"?

JavaScriptJunior~2 хв читання

Що робить `throttle`

Throttle (троттлінг) - це техніка, яка обмежує частоту викликів функції: навіть якщо подія відбувається дуже часто, функція виконуватиметься не частіше, ніж раз у заданий інтервал часу.

Простими словами:

"Викликай функцію не частіше, ніж раз у N мілісекунд."

Приклад без throttle

Припустимо, ти хочеш відстежувати, як користувач рухає мишу:

javascript

window.addEventListener("mousemove", () => {
  console.log("рух миші");
});

Проблема:

mousemove може спрацьовувати десятки разів на секунду (до 100-200 разів на секунду!);
функція буде викликатися занадто часто;
навантаження на процесор зростає -> страждає продуктивність.

З throttle

javascript

function throttle(fn, delay) {
  let lastCall = 0;

  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

const handleMove = throttle(() => {
  console.log("Рух миші оброблено!");
}, 500);

window.addEventListener("mousemove", handleMove);

Тепер функція handleMove буде викликатися не частіше, ніж 1 раз на 500 мс, навіть якщо mousemove спрацьовує сотні разів.

Як це працює всередині

При першому виклику функція виконується одразу.
Зберігається час останнього виклику (lastCall).
Усі наступні виклики ігноруються, поки не мине delay мілісекунд.
Після тайм-вікна - функція знову може бути викликана.

Відмінність від "debounce"

Особливість	Throttle	Debounce
Мета	Обмежити частоту викликів	Відкласти виконання, поки користувач "не закінчить"
Викликається	Регулярно, але не частіше ніж N мс	Тільки один раз після паузи
Приклад	`scroll`, `mousemove`, `resize`	`input`, `search`, `autocomplete`
Поведінка	"Не частіше ніж"	"Не раніше ніж"

Приклад:

Throttle - під час скролу сторінки оновлюємо позицію кожні 100 мс.
Debounce - чекаємо, поки користувач закінчить друкувати, і тільки потім робимо запит.

Приклад з реального життя

Оновлення прогрес-бара при скролі:

javascript

window.addEventListener(
  "scroll",
  throttle(() => {
    progressBar.value = window.scrollY;
  }, 100)
);

Відстеження позиції миші для анімації:

javascript

window.addEventListener(
  "mousemove",
  throttle(updateCursorPosition, 50)
);

Перерахунок розмірів вікна (resize):

javascript

window.addEventListener(
  "resize",
  throttle(updateLayout, 200)
);

Throttle у Lodash

У багатьох проєктах використовують готовий варіант з Lodash:

javascript

import { throttle } from "lodash";

const throttled = throttle(() => {
  console.log("scroll!");
}, 300);

window.addEventListener("scroll", throttled);

Версія Lodash більш просунута - уміє викликати функцію на початку і/або в кінці інтервалу (leading, trailing).

Підсумок

Пункт	Опис
Що робить	Обмежує частоту виклику функції
Коли використовувати	При частих подіях: `scroll`, `resize`, `mousemove`
Аргументи	Функція і затримка (мс)
Повертає	Нову "обгорнуту" функцію
Користь	Знижує навантаження на CPU, підвищує продуктивність
Відмінність від debounce	Виконується регулярно, але не частіше заданого інтервалу

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.