Что такое debounce time

19.04.202225.04.2022 admin 0 Comments

Что такое Throttling и Debouncing?

Jan 29, 2019 · 6 min read

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

Давайте разберёмся, как лучше их применять, чтобы ускорить работу ваших приложений.

Что это вообще такое?

Троттлинг функции означает, что функция вызывается не более одного раза в указанный период времени (например, раз в 10 секунд). Другими словами ― троттлинг предотвращает запуск функции, если она уже запускалась недавно. Троттлинг также обеспечивает регулярность выполнение функции с заданной периодичностью.

Debouncing функции означает, чт о все вызовы будут игнорироваться до тех пор, пока они не прекратятся на определённый период времени. Только после этого функция будет вызвана. Например, если мы установим таймер на 2 секунды, а функция вызывается 10 раз с интервалом в одну секунду, то фактический вызов произойдёт только спустя 2 секунды после крайнего (десятого) обращения к функции.

Можно провести такую аналогию:

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

Первый вариант можно сравнить с throttling, а второй с debouncing.

Давайте разберёмся чем мотивировано использование троттлинга.

Для чего может понадобиться применять эти техники в коде?

Предположим, у вас есть событие «С», которое, при срабатывании, вызывает функцию «Ф». Обычно «Ф» вызывается при каждом срабатывании «С», и это нормально.

Но что, если «С» срабатывает слишком часто, например 200 раз в секунду? Если «Ф» выполняет какие-то простые вычисления, то и это нормально. Но если «Ф» выполняет «дорогие» операции, например вызов внешнего API, тяжёлые вычисления или сложные манипуляции с DOM, то вы захотите ограничить частоту вызова «Ф», чтобы не было проседания производительности. Другой случай, когда стоит ограничить частоту вызовов, — это если какой-либо другой компонент приложения зависит от результата «Ф».

Давайте рассмотрим два распространённых случая, когда используют троттлинг и debouncing.

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

В строке поиска часто реализуют автозаполнение для текущего ввода пользователя. Иногда предлагаемые варианты замены извлекаются из серверной части, через API (например, на Google Maps).

Предположим, вы вводите в строку поиска «Greenwich». API автозаполнения будет вызываться при изменении текста в строке поиска. Если бы не debouncing, вызов API выполнялся бы после каждой введённой буквы, даже если вы печатаете очень быстро.

У такого подхода есть две основные проблемы:

Поэтому имеет смысл «притормозить» поиск. Debouncing функции автозаполнения на одну секунду позволит ограничить запросы, пока пользователь не перестанет печатать.

В конце концов троттлинг можно представить так: «Привет, похоже ты начал что-то делать, если ты хочешь продолжить, — нет проблем, я пока не буду обращать на это внимание». А debouncing, так: «Похоже ты ещё не закончил, ― продолжай, а я подожду».

Реализация Throttling и Debouncing

Давайте посмотрим, как можно реализовать простую функцию с троттлингом в JavaScript. Использовать её будем так:

Отметим следующие моменты:

Учитывая всё это, вот что мы получим (с примером использования):

Далее, простая debouncing функция, которая будет использоваться так:

Обратите внимание на следующие моменты:

Библиотека lodash может обеспечить более мощную throttle и debounce функциональность. С ней вы можете делать так:

Если вам не нужна библиотека целиком, можно импортировать только субмодули:

Заключение

На сегодняшний день, использовать троттлинг и debouncing наиболее полезно во фронтенде, где мы не можем контролировать скорость действий пользователей. Такие функции могут быть полезны и для сервера. На API серверах часто реализуют троттлинг («ограничение скорости»), чтобы предотвратить перегрузку приложения.

Троттлинг наиболее эффективен, когда входные данные для вызова функции не имеют значения или одинаковы каждый раз (например, событие scroll), в то время как debouncing лучше всего подходит, когда результат последнего события (например, при изменении размера окна) имеет значение для конечного пользователя. Спасибо за внимание.

Источник

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

Вы хотите, чтобы функция выполнялась после того, как прошло хотя бы 2 секунды с момента ввода.

Вот здесь debounce-функция и выходит на сцену. Вместо того, чтобы передавать myFunc слушателю событий, вы должны передать в него debounce-функцию. А в debounce-функцию передать функцию myFunc и задержку в 2000 миллисекунд.

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

Как создать debounce-функцию?

Весь код займёт 7 строк. Оставшуюся часть статьи мы будем разбирать эти 7 строк, чтобы понять как это всё работает.

На второй строке мы объявляем переменную timeout, которая будет хранить timeoutID, возвращаемый при установке интервала через setTimeout.

На третьей строке мы возвращаем анонимную функцию. Эта функция, через замыкание, позволит нам получить доступ к переменной timeout после того, как выполнение функции debounce закончится.

Замыкание в JS происходит каждый раз, когда функция сохраняет доступ к лексической области внешней функции, даже если внешняя функция уже выполнилась. Если хотите узнать больше, можете почитать главу 7 книги «Вы не знаете JS»

На четвёртой строке мы вызываем clearTimeout. Это гарантирует нам, что при каждом вызове debounce будет сбрасывать timeout и отсчёт будет начинаться с нуля.

На пятой строке мы достигаем конца функции debounce.

Мы вызываем setTimeout, чтобы создать таймаут, с указанной в delay задержкой, который выполнит функцию callback, так же переданную аргументом. Вызов setTimeout вернёт нам timeoutID, который мы запишем в переменную timeout, чтобы мы могли сбросить таймаут и начать отсчёт с нуля, если функция debounce будет вызвана ещё раз.

Строки 6 и 7 содержат только закрывающие скобки, так что нет смысла их рассматривать.

Именно так работает debounce-функция изнутри. Теперь давайте добавим всё это к примеру из начала статьи. Мы создадим инпут и добавим слушатель с нашей debounce-функцией.

Пример из реального мира

Для начала, создадим инпут.

Теперь создадим функцию, которая будет что-то делать, когда мы будем вводить текст в наш инпут.

И наконец мы мы должны добавить к нашему инпуту слушатель на событие keyup.

Теперь, при вводе данных в поле, функция helloWorld будет выполняться только если с момента завершения ввода прошло 2 секунды.

Особое спасибо пользователю Reddit с ником stratoscope за помощь с поправками в изначальном коде в статье.

Источник

Игромышь

Выбор игровой мыши. Киберспорт.

Основное

понедельник, 15 февраля 2016 г.

Время отклика кнопок мышки

Как ни странно, при покупке игровой мышки покупатели редко обращают внимание на такой важный параметр, как скорость отклика кнопок. О том, насколько быстро реагируют кнопки мыши на нажатие и как это может повлиять на вашу игру пойдет речь в данном материале.

В ходе тестирования мышки Logitech g100s при помощи высокоскоростной видеокамеры было установлено, что от момента нажатия на кнопку мыши до непосредственно отображения выстрела в игре Quake Live проходит в среднем 14 миллисекунд (мс). В то же время, для мышки Zowie EC CL это время оказалось 24 мс. Таким образом, кнопки Zowie оказались почти на 15 мс медленее!

Применение видеокамеры позволяет получить абсолютное время отклика кнопок. Однако, результаты таких измерений сильно зависят от множества факторов: конфигурации системы, настроек биоса, монитора и даже игры, которая используется для тестирования. Например, в игре Counter-Strike: Global Offensive кнопки g100s реагируют на нажатие медленнее: около 22 мс.

Поэтому с практической точки зрении, более полезной является относительная скорость кнопок. Это когда мы измеряем характеристики одной мышки по отношению к другой. Методика измерений обычно заключается в распараллеливании одного переключателя (типа Omron) одновременно на две мышки. Результаты такого тестирования более точно отражают реальное положение вещей и не зависят от условий проведения эксперимента.

Относительное время отклика кнопок игровых мышек

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

Logitech g300 = 0 мс (стандарт)

Logitech g100s, g400, g402, g500, g502, g600 = 0-1 мс

SteelSeries Ikari Optical, CM Storm Xornet, A4tech Bloody TL8 = -1 мс (быстрее стандарта)

SteelSeries Rival/Sensi, Razer 2013/Chroma, Zowie EC-A/ZA = 5-8 мс.

Logitech g303 = 3-4 мс

Microsoft 1.1/3.0 = 10-13 мс

Zowie AM/FK/EC-Evo = 15 мс

Надо понимать, что представленные цифры характеризуют исключительно «цифровую» составляющую времени отклика. Реальная задержка всегда выше указанной, ведь нужно учесть дистанцию хода самих кнопок до переключателя, а также их упругость.

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

Недавно один из участников форума overclock.net сделал большую компиляцию данных о скорости клика, взятых из разных источников. Таблица доступна ЗДЕСЬ

Зачем нам быстрые кнопки

Время реакции профессиональных игроков колеблеться в диапазоне 150-180 мс. Таким образом, 15 мс задержки кнопок будут составлять 5-10% времени реации. Учитывая, какие деньги разыгрываются в настоящее время в крупных киберспортивных турнирах, не думаю, что кому-то могут пригодиться эти лишние миллисекунды.

Как еще можно измерить быстроту кнопок?

К сожалению, в настоящее время только А4tech официально заявляет о «самых быстрых» кнопках в своих мышках. Другие производители вообще не публикуют таких данных. Поэтому если вас волнует данный показатель, перед покупкой следует искать качественные обзоры вашего устройства либо читать специализированные форумы.

Если вы уже купили мышь и хотите узнать скорость её кнопок, есть пару относительно простых способов это сделать.

Во-первых, можно воспользоваться программой Key Response PK от A4tech. Смысл в том, чтобы положить легкий, но жесткий предмет одновременно на кнопки двух разных мышек, а затем резко ударить по нему. Программа считает нажатия с двух мышек и выдаст разницу времени срабатывания кнопок.

Во-вторых, можно выполнить тест на реакцию с разными мышками. С более быстрыми кнопками результаты будут лучше.

Совсем точные результаты с помощью этих способов вы врядли получите, но приблизительно оценить, какая мышь быстрее, вполне можно. Кроме того, эти методы учитывают дистанцию хода кнопок и их упругость.

Обратная сторона медали

Переключатели в мышках с быстрыми кнопками чаще выходят из строя. Конечно, официальных статистических данных на этот счет нет, можно положится только на логические рассуждения. Однако, в последнем обновлении Logitech g502 относительная задержка клика увеличилась на 3 мс, что может быть связано с жалобами на быстрое появление «двойных нажатий» в этом устройстве. В этом смысле, перед покупкой мышки можно порекомендовать поискать корреляции между временем отклика кнопок и их долговечностью исходя из отзывов пользователей.

Debounce time

При нажатии, сигнал от кнопочного переключателя не появляется мгновенно, но в течение очень короткого времени он то появляется, то исчезает, становится то сильнее, то слабее. Чтобы избежать «ложных» двойных нажатий, в мышке определен такой параметр, как debounce time — время, в течение которого новые клики не регистрируются. Проблемы с debounce time могут возникать в следующих случаях:

— debounce включается до начала анализа сигнала от переключателя, что может увеличивать задержку кнопок

— после нажатия блокируется регистрация нажатий всех остальных кнопок (проблемы возникают там, где требуется быстрое одновременное нажатие левой и правой кнопок: фаст-зум с awp в Counter-Stike, rocket-jump в Quake, применение некоторых способностей в Dota 2)

— слишком большое значение debounce time приводит к невозможности серии быстрых последовательных нажатий (важно в Counter-Strike при стрельбе по одному патрону)

Выводы

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

Источник

debounce time

1 debouncing

устранение дребезга (в контактах)
—
[Я.Н.Лугинский, М.С.Фези-Жилинская, Ю.С.Кабиров. Англо-русский словарь по электротехнике и электроэнергетике, Москва, 1999 г.]

Параллельные тексты EN-RU

Signal flow with debouncing when time tagging occurs with the 1st pulse edge[
[Schneider Electric]

Диаграмма сигнала с устранение дребезга контактов. Метка времени присваивается моменту появления первого фронта импульса.
[Перевод Интент]

Debouncing
The first pulse edge of a signal starts a timer stage running for the duration of the set debouncing time.

Each pulse edge during the debouncing time re-triggers the timer stage.

If the signal is stable until the set debouncing time elapses, a telegram containing the time tag of the first pulse edge is generated.

After the set debouncing time has elapsed, the state of the signal is checked.

If it is the same as prior to the occurrence of the first pulse edge, no telegram is generated.

Time-tagged entries of the first pulse edge are only generated after debounce time has elapsed.
[Schneider Electric]

Устранение дребезга контактов
Первый фронт импульса сигнала запускает таймер, отсчитывающий заданное время устранения дребезга контактов.

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

Если до окончании данного времени сигнал не изменит своего значения, то формируется телеграмма, содержащая метку времени возникновения первого фронта импульса

По истечении заданного времени устранения дребезга проверяется состояние сигнала.

Если сигнал не изменился со времени появления первого фронта импульса, то телеграмма не формируется.

Телеграммы с меткой времени появления первого фронта импульса формируются только после отсчета времени устранения дребезга контактов.
[Перевод Интент]

Тематики

2 debouncing and chatter suppression