Улучшите производительность API, используя Debounce в JavaScript
beginners tutorial debounce debouncing

Улучшите производительность API, используя Debounce в JavaScript

7 ноября 2022 г.

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

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

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE