Debounce — вызвать функцию, только когда события прекратились на N мс: поиск по вводу, сохранение черновика, resize. Throttle — вызывать не чаще раза в N мс, пока события идут: прокрутка, движение мыши, отслеживание позиции.
А ещё Отменять устаревшие запросы поиска — AbortController, иначе ответы придут не по порядку
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Debounce каждый новый вызов сбрасывает таймер: функция сработает через N мс после последнего события. При непрерывном потоке событий не сработает ни разу — для поиска это и нужно.
Throttle гарантирует регулярные вызовы во время потока событий, пропуская лишние. Реализации отличаются: вызывать ли в начале окна, в конце или в обоих местах.
В React функцию оборачивают в useMemo или useRef, иначе на каждом рендере создаётся новый debounce со своим таймером.
sottofunction debounce(fn, ms) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), ms);
};
}
function throttle(fn, ms) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= ms) { last = now; fn(...args); }
};
}
input.addEventListener("input", debounce(e => search(e.target.value), 300));sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.