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