Как поставить задержку на fetch при событии oninput

[vlad_kl]

Всем добрый день!
Нужна ваша помощь.

Такая задача. Дан инпут, пользователь вводит что-то в инпут и каждый раз в живом режиме так сказать должен улетать запрос на сервер.
Для примера в коде ниже я взял запрос на jsonplaceholder.

Суть в том, что каждое событие печатания генерит кучу запросов на сервер. Нужно поставить задержку или так называемый denounce на отправку запросов.
Допустим, отправлять запрос на сервер спустя 1 секунду после того, как сработало событие oninput (по сути, как человек перестал печатать).

let request = function() {
	return fetch('https://jsonplaceholder.typicode.com/users')
	.then(response => response.json())
	.then( data => console.log(data))
}

let area = document.querySelector('input');
area.addEventListener('input', request)

В интернете достаточно информации по этому поводу, но мне так и не удалось найти подходящее решение. Или не работает код, или я что-то не так делаю, или ещё что-то

Прошу вашей помощи в моём примере, как сделать именно этот пример так, что оно работало

Спасибо заранее.

[рони]

vlad_kl,

let time;
let area = document.querySelector('input');
area.addEventListener('input', function() {
clearTimeout(time);
time = setTimeout(request, 300)
})

[Vlasenko Fedor]

vlad_kl,
Вам сюда https://learn.javascript.ru/call-apply-decorators

[vlad_kl]

vlad_kl,
Вам сюда https://learn.javascript.ru/call-apply-decorators

Я уже это прочитал, но не совсем понятно мне, как корректно применить декораторы

[vlad_kl]

let time;
let area = document.querySelector('input');
area.addEventListener('input', function() {
clearTimeout(time);
time = setTimeout(request, 300)
})

Рони, спасибо большое, вроде всё работает!
Но есть 1 вопрос у меня. Как понятно корректно и достоверно, запрос отправился только 1 раз спустя время в таймауте? Или запрос отправлялся каждый раз, когда срабатывало событие oninput, но каждый раз с задержкой в 300ms???
Можно ли это понять?
У меня есть ощущение, что запросов всё равно уходит столько, сколько раз я что-то напечатал в инпуте, просто запросы улетают с задержкой.

Спасибо заранее

[рони]

vlad_kl,
увеличьте 300 до 300 - 1500, на данный момент, если между нажатиями время меньше 300ms , то отправка будет только после последнего нажатия, если вы жмёте медленнее то каждый раз.

[Alexandroppolus]

У меня есть ощущение, что запросов всё равно уходит столько, сколько раз я что-то напечатал в инпуте, просто запросы улетают с задержкой.

Для борьбы с ощущениями есть браузерный dev-tools

В коде от Рони запрос будет отправляться всегда, только если ты долбишь чем-нибудь по клавиатуре реже 1 раза в 300 мс. Иначе каждый раз предыдущий таймер отменяется и начинает ждать снова.

[vlad_kl]

vlad_kl,
увеличьте 300 до 300 - 1500, на данный момент, если между нажатиями время меньше 300ms , то отправка будет только после последнего нажатия, если вы жмёте медленнее то каждый раз.

Да, я именно так и проверил. Через дев тулзы.
Спасибо большое вам за помощь.

[Aetae]

https://www.npmjs.com/package/awesome-debounce-promise

[vlad_kl]

https://www.npmjs.com/package/awesome-debounce-promise

Решение, возможно, супер крутое, но кода много))
А мы помним, главное в программировании что? мало кода