Debouncing — это техника, которая задерживает выполнение функции на определённое время с момента её последнего вызова. Если функция вызывается снова до истечения задержки, таймер сбрасывается.
Это предотвращает ненужные или чрезмерные вызовы функции, что улучшает производительность и снижает нежелательные побочные эффекты, такие как избыточные API-запросы.
Классический пример — это поле поиска. Без debouncing API-запрос срабатывал бы при каждом нажатии клавиши. С debouncing запрос происходит только после того, как пользователь перестанет печатать на определённое время.
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const handleSearch = debounce((query) => {
console.log("Fetching results for:", query);
}, 300);
searchInput.addEventListener("input", (e) => {
handleSearch(e.target.value);
});
handleSearch, которая очищает предыдущий таймер и запускает новыйDebouncing критически важен для оптимизации обработки частых событий, таких как:
Когда debounced функция вызывается несколько раз подряд, каждый новый вызов сбрасывает таймер, гарантируя, что функция выполнится только после истечения указанной задержки без новых вызовов.
Новый — ещё не проверен сообществом
Вы