Debouncing и throttling — это оба способа контролировать частоту выполнения функции, особенно во время частых событий типа прокрутки, изменения размера окна или ввода текста.
Debounce откладывает выполнение до тех пор, пока не пройдёт определённый период неактивности. Таймер сбрасывается каждый раз, когда событие срабатывает.
// Функция выполняется только после того, как пользователь перестал печатать на 300ms
const debouncedSearch = debounce(fetchResults, 300);
input.addEventListener('input', debouncedSearch);
Throttle ограничивает выполнение один раз в заданный интервал времени, независимо от количества срабатываний события.
// Функция выполняется максимум один раз в 200ms во время прокрутки
const throttledScroll = throttle(updatePosition, 200);
window.addEventListener('scroll', throttledScroll);
| Debounce | Throttle | |
|---|---|---|
| Выполняется когда | После периода неактивности | С регулярными интервалами |
| Лучше всего для | Важно финальное состояние | Важны непрерывные обновления |
Оба подхода значительно улучшают производительность, предотвращая лишние вызовы функций и снижая вычислительную нагрузку.
Debouncing сбрасывает таймер каждый раз, когда происходит событие, гарантируя, что функция выполняется только после периода отсутствия активности, в то время как throttling выполняет функцию с регулярными интервалами независимо от частоты событий.
Новый — ещё не проверен сообществом
Вы