Отложенный запрос к API при вводе (debounce)

Условие

Задача – смоделировать текстовый поиск, где запрос к серверу делается только после паузы в наборе символов. Требования:

• Обрабатывать каждое изменение строки, но вызывать функцию отправки запроса только если пользователь не вводил новые символы в течение 1 секунды.
• Использовать чистый JavaScript, без сторонних библиотек и фреймворков.
• Не требуется создавать HTML‑форму – достаточно реализовать реакцию на условный вызов onChange(value).
• React‑окружение использовать нельзя.

/*
  const fetchData = (value: string) => console.log(value)
*/

Ответ

Храните один идентификатор таймера. onChange немедленно обновляет отложенное значение, отменяет старый таймер и вызывает fetchData лишь после секунды без нового ввода.

const fetchData = value => console.log(value);
let timer;
function onChange(value) {
  clearTimeout(timer);
  timer = setTimeout(() => fetchData(value), 1000);
}

Последовательность onChange('r'), onChange('re'), onChange('react') с паузами меньше секунды приведёт только к fetchData('react'). Каждое изменение обработано, но сетевой вызов отложен. Уже отправленный запрос такой debounce не отменяет: для реального поиска дополнительно нужны AbortController или номер запроса, чтобы старый ответ не заменил новый.