🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🔥 Debounce на одной строке
Когда пользователь вводит текст в поиск или изменяет размер окна — запросы летят десятками. Debounce откладывает выполнение функции до тех пор, пока события не прекратятся.
const debounce = (fn, ms) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), ms);
};
};
// Использование
const handleSearch = debounce((value) => {
console.log('Поиск:', value);
}, 300);
// В React
handleSearch(e.target.value)} />
✅ Когда использовать:
— Автокомплит и live-поиск
— Обработка resize/scroll событий
— Валидация форм при вводе
— Любые частые события
💡 Почему это работает:
При каждом новом вызове старый таймер сбрасывается и создаётся новый. Функция выполнится только когда пройдёт 300ms без новых событий.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #js #react