Debouncing и Throttling - это два широко используемых метода для повышения производительности кода, который многократно выполняется в течение определенного периода времени.

В этом посте мы узнаем, как лучше использовать их, чтобы повысить производительность нашего приложения и написать лучший и быстрый код на JavaScript!

Debouncing

  • Debouncing - это метод программирования, используемый для того, чтобы гарантировать, что трудоемкие задачи не запускаются так часто, что это снижает производительность веб-страницы. заблокированная функция будет игнорировать все вызовы к ней до тех пор, пока вызовы не будут остановлены на определенный период времени. Только тогда он вызовет исходную функцию.
  • Debouncing заставляет функцию ждать определенное время перед повторным запуском. Другими словами, он ограничивает скорость вызова функции.

Реализация Debounce:

Общая идея для устранения дребезга -
1) Начать с тайм-аута 0.
2) Если противодействующая функция вызывается снова, сбросьте таймер на указанную задержку.
3) В случае тайм-аута , вызовите заблокированную функцию.

Таким образом, каждый вызов функции противодействия сбрасывает таймер и задерживает вызов. Давайте погрузимся и посмотрим, как выглядит дебаунс.

Мы передаем функцию (func) и задержку (delay) в функцию debounce. timer - это переменная, которую мы используем для отслеживания периода задержки.

Debounce - это функция высшего порядка, которая возвращает другую функцию. Это сделано для замыкания параметров функции func и delay и переменной timer, чтобы их значения были сохранены.

Если мы вызываем в первый раз, наша функция будет выполняться в конце нашей задержки. Если мы вызываем, а затем вызываем снова до окончания нашей задержки, задержка перезапускается.

Вот как это debounce выглядит в действии.

debounceBtn.addEventListener('click', debounce(function() {
  console.info('Hey! It is', new Date().toUTCString());
}, 3000));

В этом примере мы отклоняем вызов на 3 секунды, после чего печатаем дату.

Примеры:

Автозаполнение. Часто в окнах поиска есть раскрывающиеся списки с вариантами автозаполнения для текущего ввода пользователя. Иногда предлагаемые элементы загружаются из серверной части через API (например, на Google Maps). Здесь устранение ошибок может быть применено для реализации наводящего текста, когда мы ждем, пока пользователь перестанет печатать в течение нескольких секунд, прежде чем предлагать текст. Таким образом, при каждом нажатии клавиши мы ждем несколько секунд, прежде чем выдавать предложения.

Другие варианты использования -
1. Отказ от обработчика событий resize.
2. Отказ от функции сохранения в функции автосохранения.
3. Ничего не делайте, пока пользователь перетаскивает и опускает.
4. Не делайте никаких запросов Axios, пока пользователь не перестанет печатать.

Дросселирование

  • Дросселирование или иногда также называемое функцией дросселирования - это практика, используемая на веб-сайтах. регулирование функции означает обеспечение того, чтобы функция вызывалась не более одного раза в указанный период времени (например, один раз каждые 10 секунд). Это означает, что регулирование предотвратит запуск функции, если она выполнялась «недавно». Регулирование также обеспечивает регулярное выполнение функции с фиксированной скоростью.
  • Регулировка используется для вызова функции через каждую миллисекунду или определенный интервал времени, только первый щелчок выполняется немедленно.

Реализация дроссельной заслонки:

Дроссель может быть немного утомительным, поскольку его желаемое поведение имеет разные интерпретации. Начнем с ограничения скорости выполнения функции.

Первый вызов нашей функции будет выполнен и установит период ограничения inThrottle. Мы можем вызвать нашу функцию в течение этого периода, но она не сработает, пока не пройдет throttle период. Как только он пройдет, сработает следующий вызов, и процесс повторится.

Но как насчет нашего последнего звонка? Если он находится в предельном периоде, он игнорируется, а что, если мы этого не хотим? Нам нужно поймать это и выполнить по истечении установленного срока.

Эта реализация гарантирует, что мы перехватим и выполним последний вызов. Мы также вызываем его в нужное время. Мы делаем это, создавая переменную lastRan, которая является меткой времени последнего вызова. Затем мы можем использовать это, чтобы определить, был ли последний вызов в пределах throttle. Мы также можем использовать lastRan, чтобы определить, выполнялась ли регулируемая функция вообще. Это делает предыдущую переменную inThrottle избыточной.

Можно думать об этой реализации throttle как о цепочке debounce. Каждый раз debounce период ожидания сокращается. throttle имеет несколько интересных возможностей. Например, вы можете сохранить все проигнорированные исполнения и запустить их все в конце по порядку.

Примеры:

Игры. В играх-действиях пользователь часто выполняет ключевое действие, нажимая кнопку (например, стрельба, удары кулаком). Но, как известно любому геймеру, пользователи часто нажимают на кнопки гораздо больше, чем необходимо, вероятно, из-за азарта и интенсивности действия. Таким образом, пользователь может нанести «Удар» 10 раз за 5 секунд, но игровой персонаж может нанести только один удар за одну секунду. В такой ситуации имеет смысл задушить действие. В этом случае ограничение действия «Punch» до одной секунды будет игнорировать нажатие второй кнопки каждую секунду.

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

Другие варианты использования -
1. Регулировка нажатия кнопки, чтобы мы не могли спамить.
2. Регулировка вызова API
3. Регулировка обработчика событий _19 _ / _ 20_.

Вывод

Debounce - это родственник дроссельной заслонки, и оба они улучшают производительность веб-приложений. Однако они используются в разных случаях. Устранение неполадок используется, когда вы заботитесь только о конечном состоянии. Дроссель лучше всего использовать, когда вы хотите обрабатывать все промежуточные состояния, но с контролируемой скоростью.

Надеюсь, вы нашли это полезным. Спасибо за чтение :)