1. Введение
Довольно часто необходимо реализовать какой-то функционал при изменении размера окна, скроллинге или вводе пользователя. Это может быть сортировка коллекции и отрисовка результатов, анимация, манипуляции с DOM-деревом и прочее. Все это улучшает UX (user experience), но к сожалению, дают большую нагрузку на браузер из-за того что обработчики событий срабатывают слишком часто.
Например, если прикрепить обработчик скролла к элементу и прокрутить этот элемент с помощью трекпада, колеса прокрутки или просто перетаскиванием полосы прокрутки, можно вызвать около 30 событий в секунду. Но медленная прокрутка (свайп) в смартфоне может вызвать до 100 событий в секунду. Если обработчик события выполняет тяжелые вычисления и другие манипуляции с DOM, гарантированно будут проблемы с производительностью.
Throttle и Debounce - это два похожих (но разных по поведению) приема, позволяющих контролировать, сколько раз мы разрешаем выполнение функции с течением времени. Для ознакомления с этими методами будем использовать их реализацию из библиотеки Lodash.
Используя эти два подхода мы не контролируем, как часто браузер будет генерировать события. Мы всего-лишь берем контроль над частотой выполнения callback-функции, переданной в обработчик события.
2. Throttle
Прием throttle обеспечивает контроль над количеством раз, которое функция
может быть вызвана в течение промежутка времени. То есть позволяет выполнять
функцию не чаще чем один раз в N миллисекунд, гарантируя ее регулярное
выполнение.
window.addEventListener(
'scroll',
_.throttle(() => {
console.log('Scroll event handler invocation every 300ms.');
}, 300),
);
Ссылка на документацию _.throttle()
3. Debounce
Прием debounce гарантирует, что функция не будет вызвана снова, пока не
пройдет определенное количество времени без ее вызова. То есть позволяет
выполнить функцию, только если прошло N миллисекунд без ее вызова, группируя
множественные вызовы в один.
document.querySelector('input').addEventListener(
'input',
_.debounce(() => {
console.log(
'Input event handler invocation after 300ms of inactivity past burst.',
);
}, 300),
);
Ссылка на документацию _.debounce()