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

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

Устранение дребезга — это метод, который гарантирует, что длительные операции не будут запускаться так часто. Это задерживает выполнение этой конкретной программы.

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

Давайте напишем здесь простую реализацию:

function debounce(func, time = 300) {
  let timer;

  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), time);
  };
}

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

<!-- index.html -->
<html>
  <head>
    <title>Mock Search Page</title>
  </head>
  <body>
    <label for="search">Enter your search</label>
    <input id="search" type="text" name="search" />
    <script>
      const nameElement = document.querySelector("#search");

      function debounce(func, time = 500) {
        let timer;

        return (...args) => {
          clearTimeout(timer);
          timer = setTimeout(() => func.apply(this, args), time);
        };
      }

      const debouncedSearchFunction = debounce((event) => {
        console.log("querying: " + event.target.value + "....");
      });

      nameElement.addEventListener("keyup", (event) => {
        debouncedSearchFunction(event)
      });
    </script>
  </body>
</html>

Приведенный выше код debounce возвращает функцию и сохраняет локальную переменную timer (оба они образуют замыкание). таймер действует как состояние для управления временем.

В обратном вызове прослушивателя событий мы вызываем функцию, возвращаемую debouce, и, как мы видим, аргументы этой функции передаются аргументу func с помощью метода [Function.prototype.apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply).

Заключение

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

Также опубликовано здесь