HTML5 input real-time detection and delay optimization

There is a project where the input box monitors the input in real time and triggers the request.

The first idea is to use the onchange() method on the input. I tried it, but it doesn’t work. It will only be triggered after the value change is confirmed, which is not immediate.

I checked online,

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

The method does work, but changes in real time. The sending frequency is a bit fast.

Hurry up and add a timer setTimeout.

 $(#fix).on('input propertychange', function(event){ setTimeout(function(){ //Delay 0.5s to execute console.log($(#fix).val()) },500);} );

The problem comes again. The timer is asynchronous. Although it is delayed, it will still be executed without any change.

Later, I thought of unbinding and bind, but no keyboard input events could be obtained during the unbinding time.

The first idea at the time was to trigger the event - delete the timer - add the timer - execute the function. I found that it was still not good and the timer could not be deleted, so I simply stopped executing it.

Finally, I checked online and found a new method.

Timestamp method.

The principle is that each time the global variable and timestamp are modified by input, the new timestamp will be monitored with a delay of 0.5s and is equal to the bound timestamp, and then proceed to the next step.

-----html-----

 <input type=text id=fix>------script-----var last;$(#fix).on('input propertychange', function(event){ //#fix is ​​your input Box last = event.timeStamp; //Use event's timeStamp to mark time, so that each event will modify the value of last. Note that last must be a global variable setTimeout(function(){ //Set a time delay of 0.5s to execute if(last -event.timeStamp==0) //If the time difference is 0 (that is, no other keyup event occurs within 0.5s after you stop typing), then do what you want to do { console.log($(#fix).val()) } }, 500);});

The above is the HTML5 input real-time detection and delay optimization introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!