Привет, ребята, Итак, сегодня мы увидим, что означают эти два слова, упомянутые в заголовке 🤔, почему они важны 🧐, а также простой код для реализации.

Давайте начнем, прежде чем я хочу задать вам быстрый вопрос? Вы когда-нибудь были на каком-либо веб-сайте электронной коммерции или в любом веб-приложении, где вы найдете панель поиска, где мы можем искать что-либо, например поиск amazon, поиск флипкарт и т. д. Зайдите и проверьте один раз, когда вы делаете запрос на поиск, будет HTTP GET запрос на вкладке сети, который будет срабатывать каждый раз, когда вы вводите это поле ввода, что делается специально для автоматических предложений. Например, я иду на веб-сайт электронной коммерции и ищу мобильные телефоны до 20000 [мой поисковый запрос], автоматические предложения будут предоставлены в раскрывающемся списке во время выполнения, потому что API дает ответ на все, что мы ищем. в поле ввода.

Это было просто, но задумывались ли вы, что произойдет, если поисковый запрос будет слишком длинным, например, более 50 слов!! Это означает 50 запросов GET (при условии, что один запрос для каждого введенного слова). Вы одиноки в этом мире? Я думаю, что нет 1000 человек, параллельно использующих один и тот же GET со строкой длиной 50, оцениваемой как 50 * 1000 = 50000 запросов GET одновременно. Текущие серверы по-прежнему могут брать на себя эту нагрузку и использовать балансировку нагрузки, чтобы не влиять на производительность. Но можем ли мы сделать какую-либо оптимизацию производительности еще до того, как мы ударим по серверу и снизим этот счет. Конечно, мы можем сделать это, используя концепцию устранения дребезга или дросселирования.

Теперь, когда мы увидели общую картину проблемы, с которой мы можем столкнуться во время такого проектирования, но не волнуйтесь, у нас есть решение для решения этой проблемы. Давайте сначала углубимся в концепцию Debouncing. Краткий обзор из Интернета, который помогает:

Устранение дребезга — это не что иное, как сокращение ненужных вычислений, отнимающих много времени, для повышения производительности браузера. Есть несколько сценариев, в которых некоторым функциям требуется больше времени для выполнения определенной операции. Возьмем, к примеру, панель поиска на веб-сайте электронной коммерции.

Debouncing дает пользователю возможность завершить свой запрос или, по крайней мере, полное значение слова, прежде чем мы получим результаты.

Слишком много теории, теперь переходим к реализации устранения дребезга в javascript/typescript. Я добавил пользовательский интерфейс и фрагмент кода ниже для большего понимания.

Давайте разберемся шаг за шагом:

  1. Показанный пользовательский интерфейс прост и не требует пояснений.
  2. Я предполагаю то же самое и для HTML-кода 😎.
  3. Теперь код TS имеет два метода: getData(), который имеет фальшивый вызов API GET, который возвращает ответ с данными (в идеальной ситуации), метод optimisedDebounce() который делает магию за кулисами.
  4. Он имеет переменную таймера для хранения метода setTimeout, здесь настраиваемую переменную задержки (1000 мс/1 секунду) и возвращаемую функцию с методом setTimeout, который принимает эту переменную DelayDelay и выполняется после каждой настроенной секунды (здесь после каждую 1 секунду). В методе setTimeout у нас есть getData(), функциональность которого я описал выше. Также мы каждый раз повторно инициализируем таймер, передавая переменную таймера внутри clearTimeout(). Мы также можем использовать apply() для поддержки ЭТОЙ ссылки, но пока я сделал это легко и просто.
  5. Этот optimizedDebounce() вызывается из HTML как событие нажатия клавиши, поэтому всякий раз, когда пользователь вводит какое-либо событие нажатия клавиши ввода, оно срабатывает и перехватывается в этом методе, и снова повторяется 3 шага.

Итак, чего мы добились, так это того, что getData() не будет вызываться до истечения 1 секунды. Теперь, если пользовательский ключ в «Мобильные устройства до 20000», мы можем разбить этот запрос как [Мобильные устройства]: 1 с (предположительно) [меньше]: 1 с (предположительно) [20000]: 1 с (предположительно) Всего требуется 3 секунды и 3 запроса API GET, иначе для каждого ввода будет просто подсчитываться длина строки Mobiles под 20000 =17 ПОЛУЧИТЬ попадание.

Наш код теперь хорошо оптимизирован в соответствии с концепцией устранения дребезга. Теперь, когда дросселирование входит в картину. Перед этим краткое описание:

Регулирование означает контроль или ограничение запроса пользователем. Это немного отличается от устранения дребезга, которое мы видели выше, но оба повышают производительность приложения.

Предположим, что пользователь на веб-сайте электронной коммерции ищет "Мобильные телефоны до 20 000". Мы контролировали некоторую часть с помощью устранения дребезга, но что произойдет, если он начнет нажимать кнопку поиска несколько раз, что получит тот же результат, поскольку запрос не изменился. Это снова приведет к снижению производительности, если не будут задействованы кэширующие или сервисные работники. Можем ли мы сделать что-нибудь, чтобы ограничить это действие. Да, мы можем задушить его! Найдите код ниже:

Здесь у нас есть флаг isLimitCrossed, который по умолчанию имеет значение true, и definedLimit, который снова можно настроить. Здесь мы настроили 2 секунды, что означает, что мы не будем вызывать getData(), пока не пройдет 2 секунды после того, как пользователь нажмет кнопку поиска. «Это не означает, что мы отключили кнопку НЕТ!! Мы не можем ухудшать качество обслуживания клиентов. Это будет сделано за кулисами». Когда метод вызывается из события клика из HTML, он проверяет наличие isLimitCrossed. Если isLimitCrossed равно true, вызывается getData()и немедленно устанавливается isLimitCrossed в ложь. После этого выполняется метод setTimeout(), в котором мы устанавливаем для isLimitCrossed значение true через 2 секунды. Таким образом, мы контролировали/ограничили действия пользователя, не сообщая ему об этом.

Итак, мы рассмотрели две важные концепции, которые следует учитывать при проектировании. Для живого примера проверки https://stackblitz.com/edit/angular-ivy-wmnf73

Надеюсь, вам понравился пост и он был полезен. Удачного кодирования!!.