Обнаружение ввода HTML5 в реальном времени и оптимизация задержки

Существует проект, в котором поле ввода отслеживает ввод в реальном времени и запускает запрос.

Первая идея — использовать метод onchange() для ввода. Я пробовал, но он не работает. Он сработает только после подтверждения изменения значения, что не происходит немедленно.

Я проверил онлайн,

 $(#fix).on('input propertychange', function(event){});

Метод работает, но меняется в реальном времени. Частота отправки немного быстрая.

Поторопитесь и добавьте таймер setTimeout.

 $(#fix).on('input propertychange', function(event){ setTimeout(function(){ //Задержка 0,5 с для выполнения console.log($(#fix).val()) },500); });

Проблема возникает снова. Таймер асинхронный. Несмотря на задержку, он все равно будет выполнен без каких-либо изменений.

Позже я подумал об отвязке и привязке, но во время отвязки не удалось получить никаких событий ввода с клавиатуры.

Первой идеей того времени было вызвать событие — удалить таймер — добавить таймер — выполнить функцию. Я обнаружил, что это все еще нехорошо и таймер невозможно удалить, поэтому я просто прекратил его выполнение.

Наконец, я проверил онлайн и нашел новый метод.

Метод временной метки.

Принцип заключается в том, что каждый раз, когда глобальная переменная и временная метка изменяются посредством ввода, новая временная метка будет отслеживаться с задержкой 0,5 с и равна связанной временной метке, а затем переходить к следующему шагу.

-----html-----

 <input type=text id=fix>------script-----var last;$(#fix).on('input propertychange', function(event){ //#fix — ваш input Box last = event.timeStamp; //Используйте метку времени события, чтобы отмечать время, чтобы каждое событие изменяло значение последнего. Обратите внимание, что последнее должно быть глобальной переменной setTimeout(function(){ //Устанавливаем задержку 0,5. s для выполнения if(last -event.timeStamp==0) //Если разница во времени равна 0 (т. е. в течение 0,5 с после прекращения ввода текста не происходит никаких других событий нажатия клавиш), то делайте то, что хотите { console.log($(#fix).val()) } } , 500);});

Вышеуказанное представляет собой обнаружение ввода HTML5 в реальном времени и оптимизацию задержки, представленную вам редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!