Эта статья была рецензирована Vildan Softic и Julian Motz . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Одним из рисков прослушивания событий прокрутки является снижение производительности. Браузер будет выполнять обратный вызов каждый раз, когда пользователь прокручивает, что может быть много событий в секунду. Если обратный вызов выполняет много перерисовок, это означает плохие новости для конечного пользователя. Перекрашивание обходится дорого, особенно когда вы перерисовываете большие части представления, как, например, в случае события прокрутки.
Пример ниже иллюстрирует проблему:
Помимо снижения производительности и склонности к возникновению судорог. Этот пример иллюстрирует, что происходит, когда компьютер делает именно то, что вы говорите. Между фоновыми цветами нет плавного перехода, а экран просто мерцает. Любой несчастный программист может чувствовать, что в этом мире не осталось надежды. Нет ли лучшего способа?
Регулирующие события
Одно из решений — отложить события и управлять ими сразу. В этом нам могут помочь две часто используемые функции: throttle и debounce.
Throttle гарантирует постоянный поток событий в заданный промежуток времени, тогда как debounce группирует поток событий в одно событие. Один из способов думать об этом — это дроссель, основанный на времени, а отстранение от событий. Регулирование гарантирует выполнение, в то время как debounce не происходит после группировки. Если вы хотите узнать подробности, ознакомьтесь с этим подробным обсуждением дебаза и троттлинга .
Debounce
Debounce решает другую проблему, такую как нажатие клавиш с помощью Ajax. Когда вы вводите форму, почему вы отправляете запрос на каждое нажатие клавиши? Более элегантное решение — сгруппировать пакет клавиш в одно событие, которое вызовет Ajax-запрос. Это вписывается в естественный поток ввода и экономит ресурсы сервера. При нажатии клавиш интервал между событиями не важен, поскольку пользователи не печатают с постоянной скоростью.
дроссель
Поскольку нет никаких гарантий с debounce, альтернативой является регулирование событий прокрутки. Прокрутка происходит в заданный промежуток времени, поэтому она подходит для газа. Как только пользователь начинает прокручивать, мы хотим гарантировать своевременное выполнение.
Этот метод помогает проверить, находимся ли мы в определенной части страницы. Учитывая размер страницы, просмотр контента занимает много секунд. Это позволяет дросселированию запускать событие только один раз за любой заданный интервал. Регулирование событий сделает процесс прокрутки более плавным и гарантирует выполнение.
Ниже приведено ограничение событий бедного человека в ванильном JavaScript:
function throttle(fn, wait) {
var time = Date.now();
return function() {
if ((time + wait - Date.now()) < 0) {
fn();
time = Date.now();
}
}
}
Эта реализация устанавливает переменную time Каждый раз, когда возвращаемая функция вызывается, она проверяет, прошел ли интервал waittime
Использование библиотеки
Регулирование событий имеет много опасностей, и не рекомендуется готовить его самостоятельно. Вместо того, чтобы писать собственную реализацию, я рекомендую использовать стороннюю реализацию.
lodash
lodash является стандартом де-факто для регулирования событий в JavaScript. Эта библиотека с открытым исходным кодом, так что не стесняйтесь исследовать код. Что приятно, так это то, что библиотека является модульной, поэтому из нее можно получить только то, что вам нужно.
Регулирование событий прокрутки становится простым благодаря функции газа lodash:
window.addEventListener('scroll', _.throttle(callback, 1000));
Это ограничивает поток входящих событий прокрутки до одной каждые 1000 миллисекунд (одна секунда).
API предлагает опцию « leadingtrailing
_.throttle(callback, 1, { trailing: true, leading: true });
Эти параметры определяют, будет ли выполняться обратный вызов на переднем и / или заднем фронте.
Здесь есть одна проблема: если вы укажете ведущий и трейлинг со значением false Если установить значение true Когда вы устанавливаете для ведущего и конечного значения значение true
Ознакомьтесь с демонстрацией на CodePen: события прокрутки
Что я нахожу интересным, глядя на исходный код, так это то, что throttle()debounce() Регулирование просто передает другой набор параметров, чтобы изменить желаемое поведение. Throttle устанавливает maxWait В остальном реализация остается прежней.
Я надеюсь, что вы найдете lodash полезным в вашем следующем захватывающем приключении!
Вывод
Ключ к ограничению дебатов — посмотреть на природу проблемы, которую вы должны решить. Эти два метода подходят для разных случаев использования. Я рекомендую посмотреть на проблему с точки зрения пользователя, чтобы найти ответ.
Прелесть использования lodash в том, что он абстрагируется от множества простых API. Хорошей новостью является то, что вы можете использовать _.throttle() Существует lodash-cli , инструмент, который позволяет вам создавать пользовательские сборки только с теми функциями, которые вам нужны. Регулирование событий — это лишь малая часть всей библиотеки.