Производительность веб-сайта играет огромную роль в улучшении пользовательского опыта нашего пользователя. Иногда это можно сделать довольно легко, ограничив скорость вызова функции и вызывая ее только после внесения значительных изменений.
Это подводит нас к теме подавления и дросселирования, и выбор того, который им больше всего подходит, имеет решающее значение, поскольку они имеют разный эффект.
Давайте сначала избавимся от основных вещей
Регулирование и устранение неполадок - это два способа ограничить скорость обработки событий.
Вы можете спросить, что такое мероприятие?
Событие - это действие, которое происходит в системе. В системе фронтенд-разработки будет браузер, и примерами события будут изменение размера окна или щелчок по кнопке.
В JavaScript вы можете реагировать на события с помощью прослушивателей событий. Событие listener - это функция, которая прослушивает данное событие в элементе DOM и выполняет функцию обработчика всякий раз, когда это событие происходит. Чтобы добавить событие, вы можете использовать функцию addEventListener .
Debouncing
Согласно концепции противодействия, событие независимо от того, сколько раз запускалось пользователем, будет выполняться только после определенного времени бездействия пользователя, не вызывающего это событие.
В этом случае, если пользователь нажимает кнопку непрерывно, как вечность, функция никогда не будет вызвана и, следовательно, будет подвержена голоданию.
Это можно использовать на сайтах электронной коммерции, где вы можете искать конкретный товар, и он предлагает на основе сделанного вами запроса. Нет смысла отправлять вызов API при каждом нажатии ключевого слова и, следовательно, для ограничения скорости используется debouncing.
Допустим, вы хотите выполнить поиск в Logitech G102, а продолжительность устранения неполадок установлена на 300 мс. Вы вошли в панель поиска и начали писать свой запрос, и после того, как вы написали Logitech, вы сделали паузу более 300 мс, и именно тогда функция будет вызвана, чтобы предложить вам на основе запроса, и если бы не было паузы, у нее не было бы уволили вообще.
Давайте посмотрим на это вживую.
Отличный пример для вас, ребята, - здесь. Спасибо Корбачо за этот замечательный код.
Дросселирование
Согласно концепции регулирования, если пользователь постоянно запускает событие, функция будет вызываться строго по истечении определенного периода времени.
В этом случае, если пользователь нажимает кнопку непрерывно, как бесконечно, функция будет вызываться ровно один раз в заданный период времени, независимо от того, как часто запускается событие.
Отличным примером этого может быть игра-стрелялка, в которой игрок непрерывно стреляет по цели с максимальной скоростью, а если используется дросселирование, пули запускаются только один раз в заданный период времени, независимо от того, как быстро пользователь щелкает.
Отличный пример для вас, ребята, - здесь. Спасибо Корбачо за этот замечательный код.
Дросселирование против ослабления
Возьмем пример сотрудника, который хочет повышения зарплаты и просит об этом у своего руководителя.
В одном случае он постоянно приставал к своему менеджеру, требуя повышения, а его менеджер устал слышать одну и ту же историю каждый день. Поэтому он говорит, что повысит зарплату только в том случае, если проработает месяц и не поднимет этот вопрос в течение этого срока, а если он поднимет этот вопрос раньше срока, то ему придется все начинать заново.
Вот как работает противодействие.
Другой случай - он приносит вопрос о повышении зарплаты, и в этот момент менеджер соглашается и повышает ему зарплату. Но на этот раз сотрудник хочет большего и, следовательно, начинает постоянно требовать большего. Зная поведение сотрудника, он какое-то время игнорирует его, а затем повышает ему зарплату, но никогда дважды за определенный период времени.
Так работает дросселирование.
Давайте посмотрим на это в действии.
Когда что использовать?
У обеих концепций есть свои плюсы и минусы, и на их основе появляются их варианты использования.
Debouncing можно использовать, когда важен результат самого недавнего события, а предшествующие события не имеют большого значения.
Регулировку можно использовать, когда ввод, предоставленный для функции, не имеет значения или каждый раз один и тот же. Небольшим примером может быть бесконечная прокрутка на веб-странице. Здесь нам нужно только проверить, насколько далеко пользователь находится от нижней части страницы. Если они близки, мы запрашиваем дополнительные данные и добавляем их на страницу. Debouncing не сработает, так как он сработает только тогда, когда пользователь остановится, а мы этого не хотим.
Другой пример - многопользовательская стрелялка, в которой ваш персонаж должен стрелять, чтобы убить своего противника. К этой способности к стрельбе можно применить дросселирование, так что она может стрелять только один раз в секунду. Теперь, даже если игрок дает команду ударить 10 раз за 5 секунд, количество выпущенных пуль будет всего 5.
Заключение
Такие методы, как устранение неполадок и регулирование, дают нам контроль над выполнением событий на наших веб-сайтах, помогая нам сократить количество сложных вычислительных задач, которые могут снизить производительность нашего веб-сайта.
