"Живой" поиск js. Как реализовать с помощью асинхронного js?

Question

[DenAximand]

День добрый, господа.
Есть вот такая задачка. Нужно реализовать "живой" поиск на js. Да, знаю вариантов его реализации в интернете полно, но мне необходим специфический его вариант.
Суть задачи такой: при срабатывании ивента oninput должен запускаться скрипт, который будет ждать повторного срабатывания ивента 1.5 секунды. Если ивент сработал, ждем еще 1.5 сек и т.д. Но если ивент не произошел, то мы получаем данные из строки поиска и отправляем их(как именно, не суть).
<input id="search"> //строка поиска

let target = document.querySelector('#search');
target.oninput = function () {
    let val = this.value.trim();
}

Пришел к мысли, что возможно это нужно реализовывать при помощи асинхронного js кода. Но с ним я еще не работал. Буду рад советам, помощи, возможным решениям.
Заранее благодарен.

Comments

[DenAximand]

Пашенька, пробовал реализовать через setTimeout. Но или я его не совсем верно применял, или он не подходит для данной задачи. Возможно я не совсем точно описал задачу. Живой поиск срабатывает при каждом изменении строки поиска и отсылает запрос. А мне нужно чтобы после каждого изменения он ждал 1.5 секунды и если пользователь больше ничего не писал, не удалял, то мы получаем значение из строки поиска и делаем запрос с этими данными.

[Rsa97]

DenAximand, Поэтому по событию проверяете, если уже установлен таймер, то сбрасываете его, затем взводите новый таймер на 1.5 секунды.

Answer 1

[Пашенька]

let target = document.querySelector('#search');
let timerId = null;

target.oninput = function () {
	let inputValue = this.value.trim();
	let lastTime = performance.now();

	if (timerId) {
		clearTimeout(timerId);
	}

	timerId = setTimeout(function() {
		if (performance.now() - lastTime > 1500 && inputValue) {
			console.log('Send', inputValue);
		}
	}, 1500);

}

Comments

[DenAximand]

Спасибо огромное) Сейчас буду разбирать и вникать, но это именно то что мне нужно было)