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