При создании приложения с использованием 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 мс, то будет выполняться только функция.

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

подпишитесь на меня, чтобы узнать больше о подобных сообщениях в блоге.
Дайте мне знать, был ли этот блог полезен.

Твиттер || Линкедин