При создании приложения с использованием JavaScript. Возможно, нам придется вызывать функцию много раз, чтобы добиться желаемого результата.
Некоторые примеры
- При прокрутке или изменении размера экрана вы захотите что-то вычислить.
- Иногда нам может понадобиться отображать быстрые результаты по мере того, как пользователь вводит данные в поле ввода.
Давайте посмотрим, как мы обычно пишем код для достижения желаемого результата.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Debouncing</title> </head> <body> <input class="search" type="text" placeholder="search"/> <script src="index.js"></script> </body> </html>
let count = 0; function search(query){ // some api call console.log("result",count++) }
document.querySelector(".search").addEventListener("input",(e)=>{ search(e.target.value); })
В приведенном выше примере, если я ищу ноутбук, функция поиска будет вызываться 6 раз. Это неэффективный способ вызова функции. И это очень дорого для JavaScript.
Вам должно быть интересно, что вы подразумеваете под дорогим для JavaScript?
JavaScript — это синхронный однопоточный язык. Это означает, что у нас есть один стек вызовов для выполнения всего. И поскольку он однопоточный, мы не должны блокировать поток, вызывая ненужные функции.
Но подождите…
Как предотвратить ненужные вызовы функций для повышения производительности?
Здесь на сцену выходит концепция устранения дребезга.
Отмена дребезга – это метод, используемый для повышения производительности браузера. Это гарантирует, что трудоемкие задачи не будут запускаться так часто. Другими словами, это ограничивает скорость, с которой вызывается функция.
Давайте перепишем приведенный выше код, используя метод устранения дребезга.
let count = 0; function search(query){ // some api call console.log("result",count++)
}
const magicFunction = debounce(search,300);
function debounce(func, delay){ let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func(...args); }, delay); }; }
document.querySelector(".search").addEventListener("input",(e)=>{ magicFunction(e.target.value); });
Идея метода устранения дребезга заключается в том, что мы вызываем функцию не во время события, а после события.
В приведенном выше примере мы можем ясно видеть.
debounce — это функция высшего порядка (HOF). Который принимает два параметра, первый параметр будет функцией, а второй будет задержкой.
Если задержка между двумя нажатиями клавиш меньше 300 мс, функция не будет выполняться и setTimeout
будет уничтожена. А если задержка больше 300 мс, то будет выполняться только функция.
Вот как мы можем реализовать технику подавления дребезга, чтобы повысить производительность нашего приложения
подпишитесь на меня, чтобы узнать больше о подобных сообщениях в блоге.
Дайте мне знать, был ли этот блог полезен.