Коли використовувати throttle?

VueJunior~1 хв читання

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

Простіше кажучи:

Throttle потрібен, коли події відбуваються дуже швидко, але вам важливо реагувати регулярно, а не на кожен виклик.

Коли варто використовувати throttle?

Ось основні ситуації, які очікують почути на співбесіді.

1. Скрол (scroll)

Подія scroll може тригеритися десятки разів на секунду.

Наприклад:

оновлення позиції елементів
підрахунок прогресу читання
підвантаження наступної порції даних (infinite scroll)

Троттлінг знижує навантаження:

window.addEventListener('scroll', throttle(handleScroll, 100))

2. Resize вікна

resize може викликатися сотні разів, коли користувач рухає вікно.

Використовувати throttle для:

перерахунку розмірів елементів
перебудови layout
адаптивних дій

3. Обробники миші

Наприклад, при:

mousemove
drag
малюванні на canvas
перетягуванні об'єктів

Викликаються тисячі подій → throttling обов'язковий.

4. Відстеження положення курсора

Якщо потрібно оновлювати координати з обмеженням:

window.addEventListener('mousemove', throttle(updatePosition, 50))

5. Автозбереження «за таймером»

Якщо користувач швидко вводить текст у формі:

debounce підходить для відправлення запиту
throttle підходить для періодичного автозбереження, поки користувач продовжує вводити

Наприклад, зберігати раз на 2 сек.

Відмінність від debounce (дуже важливий пункт)

Інструмент	Коли викликається
Debounce	Після того, як користувач перестав вводити/скролити
Throttle	Регулярно, але не частіше вказаного інтервалу

Приклад:

Debounce - шукати після того, як користувач перестав друкувати.
Throttle - оновлювати прогрес скролу раз на 100ms.

Приклад throttling з Lodash

import throttle from 'lodash/throttle'

const onScroll = throttle(() => {
  console.log('scrolling...')
}, 200)

Приклад власної реалізації

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

Коротка відповідь для співбесіди

Throttle використовують тоді, коли важливо реагувати на подію регулярно, але не частіше визначеного інтервалу. Приклади: scroll, resize, mousemove, drag, періодичне автозбереження. Це зменшує навантаження на рендеринг і запобігає лагам в UI.

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

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

Premium

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