Устранение дребезга в JavaScript — это практика, используемая для повышения производительности браузера. На веб-странице могут быть некоторые функции, требующие длительных вычислений. Если такой метод вызывается часто, это может сильно повлиять на производительность браузера, поскольку JavaScript является однопоточным языком. Устранение дребезга — это практика программирования, используемая для того, чтобы трудоемкие задачи не запускались так часто, что это приводит к остановке производительности веб-страницы. Другими словами, он ограничивает скорость вызова функции.
давайте возьмем пример сайта интернет-магазина в режиме реального времени, у нас есть окно поиска, в котором мы ищем какой-либо продукт, и оно дает вам предложения, связанные с вашим запросом,
давайте предположим, что при поиске выполняется вызов API.
В обычном поле ввода, когда вы вызываете функцию, она будет вызываться при каждом нажатии клавиши, что означает, что вызов API запускается для каждого введенного нажатия клавиши, выполнение такого количества вызовов будет влияют на производительность браузера.
Решение: устранение дребезга станет спасением в таких случаях, основная логика решения этой проблемы заключается в том, что пользователи делают паузу между двумя нажатиями клавиш, а затем вызывают API.
HTML: onkeyup, мы вызываем метод debounce.
‹input type="text" onkeyup="debounce()"›
Javascript:
https://codepen.io/ajinkyakhandar/pen/KKQOXbX
Пояснение кода:
1. let debounce = doSomeMagic(getCount, 300)
onkeyup мы вызываем метод debounce, который творит магию над методом getCount, здесь метод getCount мы можем принять за функцию, которая вызывает поисковый API.
2. В doSomeMagic мы передаем два аргумента: функцию getCount и задержку между двумя нажатиями клавиш,
3. doSomeMagic вернет функцию, поэтому мы можем выполнить debounce()
4. Чтобы добавить задержку между нажатиями клавиш, установите тайм-аут, который принимает «d» в качестве задержки.
5. контекст и аргументы, которые обрабатывают аргументы для getCount, если таковые имеются
6. После каждого выполнения API мы сбрасываем таймаут
