Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Коли використовувати throttle?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Throttle** використовують, коли потрібно зменшити частоту виклику функції, обмеживши її виконання не частіше одного разу на X мілісекунд, навіть якщо подія відбувається значно частіше. **Ключове:** на відміну від debounce, який чекає, поки подія припиниться, throttle реагує регулярно - наприклад, для scroll, resize чи mousemove.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Throttle (троттлінг)** використовують тоді, коли потрібно **зменшити частоту виклику функції**, обмеживши її виконання, наприклад, **не частіше одного разу на X мілісекунд**, навіть якщо подія відбувається значно частіше. Простіше кажучи: > **Throttle потрібен, коли події відбуваються дуже швидко, але вам важливо реагувати регулярно, а не на кожен виклик.** --- ## Коли варто використовувати throttle? Ось основні ситуації, які очікують почути на співбесіді. --- ## 1. Скрол (scroll) Подія `scroll` може тригеритися **десятки разів на секунду**. Наприклад: - оновлення позиції елементів - підрахунок прогресу читання - підвантаження наступної порції даних (infinite scroll) Троттлінг знижує навантаження: ```js window.addEventListener('scroll', throttle(handleScroll, 100)) ``` --- ## 2. Resize вікна `resize` може викликатися **сотні разів**, коли користувач рухає вікно. Використовувати throttle для: - перерахунку розмірів елементів - перебудови layout - адаптивних дій --- ## 3. Обробники миші Наприклад, при: - `mousemove` - `drag` - малюванні на canvas - перетягуванні об'єктів Викликаються тисячі подій → throttling обов'язковий. --- ## 4. Відстеження положення курсора Якщо потрібно оновлювати координати з обмеженням: ```js window.addEventListener('mousemove', throttle(updatePosition, 50)) ``` --- ## 5. Автозбереження «за таймером» Якщо користувач швидко вводить текст у формі: - debounce підходить для відправлення запиту - **throttle** підходить для періодичного *автозбереження*, поки користувач продовжує вводити Наприклад, зберігати раз на 2 сек. --- ## Відмінність від debounce (дуже важливий пункт) | Інструмент | Коли викликається | |---|---| | **Debounce** | *Після того, як користувач перестав вводити/скролити* | | **Throttle** | *Регулярно, але не частіше вказаного інтервалу* | Приклад: - Debounce - шукати після того, як користувач перестав друкувати. - Throttle - оновлювати прогрес скролу раз на 100ms. --- ## Приклад throttling з Lodash ```js import throttle from 'lodash/throttle' const onScroll = throttle(() => { console.log('scrolling...') }, 200) ``` --- ## Приклад власної реалізації ```js 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.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.