Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обработка oninput (https://javascript.ru/forum/events/81423-obrabotka-oninput.html)

eLDeR 25.11.2020 01:03

Обработка oninput
 
Доброго времени суток, господа.

Есть код, который обрабатывает ввод... он делает это столько раз, сколько было введено символов с задержкой 3000.

Нужно что бы код выполнялся спустя 3 сек после последнего введенного символа

document.addEventListener('DOMContentLoaded', function () {
	var codeinpit = document.querySelector('#promo');
	var price = document.getElementById('price');
	codeinpit.oninput = function () {
			code = this.value;
			function wait() {
				const request = new XMLHttpRequest();
				const url = "../action/code.php?code=" + code;
				request.open('GET', url); 
				request.setRequestHeader('Content-Type', 'application/x-www-form-url');
				request.addEventListener("readystatechange", () => {
					if (request.readyState === 4 && request.status === 200) {
						console.log( request.responseText );
					}
				});
				request.send();
//				price.innerHTML = code;
			}
			setTimeout(wait, 3000);
		}
});

рони 25.11.2020 01:08

eLDeR,
создайте переменную для таймера строка 3 и обнуляйте в строке 19

eLDeR 25.11.2020 02:26

Я не очень разбираюсь в JS этот код я писал день, ссылаясь на всякие источники.. если вы мне подскажите как его дописать, буду благодарен

рони 25.11.2020 08:34

eLDeR,
document.addEventListener('DOMContentLoaded', function () {
	let codeinpit = document.querySelector('#promo');
	let price = document.getElementById('price');
    let timer;
	codeinpit.oninput = function () {
            window.clearTimeout(timer);
			let code = this.value;
			function wait() {
				const request = new XMLHttpRequest();
				const url = "../action/code.php?code=" + code;
				request.open('GET', url);
				request.setRequestHeader('Content-Type', 'application/x-www-form-url');
				request.addEventListener("readystatechange", () => {
					if (request.readyState === 4 && request.status === 200) {
						console.log( request.responseText );
					}
				});
				request.send();
//				price.innerHTML = code;
			}
			timer = setTimeout(wait, 3000);
		}
});

Rise 25.11.2020 09:37

eLDeR,
Возможно тебе throttle-декоратор нужен:
codeinpit.oninput = throttle(request, 3000);

voraa 25.11.2020 10:56

Цитата:

Сообщение от Rise
Возможно тебе throttle-декоратор нужен:

Скорее уж debounce
https://habr.com/ru/post/60957/


Часовой пояс GMT +3, время: 16:19.