HTML5 input real-time detection and delay optimization

One project is, in this case, the input box, which monitors the input in real time and triggers the request.

The first idea is input on the onchange () method, try it, not good, is the value of such changes confirmed, will trigger, not immediately.

Check the Internet,

$ ("#fix"). On (' Input PropertyChange ', function (event) {});

The method is actually available, but changes in real time. The frequency of the transmission is a bit fast.

Hurry up and add a timer settimeout.

$ ("#fix"). On (' Input PropertyChange ', function (event) {   setTimeout () {    //delay 0.5s execution                   Console.log ( $ ("#fix"). Val ())        },500);});

The problem again, the timer is asynchronous, although the delay, but will be executed, nothing changed.

Later thought to unbind Unbind,bind, but in the time of the unbound to get the keyboard input event.

The first idea was to trigger the event-Delete timer-Add Timer-execute function. Found or not, the timer can not be deleted, simply do not carry out.

Finally went online to look up, found a new method.

time Stamp method .

The principle is that each time the input modifies the global variable, the timestamp, the delay 0.5s monitors the new timestamp and the binding timestamp is equal, proceed to the next step.

-----HTML-----<input type= "text" id= "fix" >

------Script-----
var last;$ ("#fix"). On (' Input PropertyChange ', function (event) {    //] #fix为你的输入框 last       = Event.timestamp;       Use the timestamp of the event to mark the time so that each event modifies the last value, note that last must be a global variable       setTimeout (function () {    //Set delay 0.5s to execute            if ( last-event.timestamp==0)               //If the time difference is 0 (that is, you stop entering 0.5s No other KeyUp event occurs) then do what you want to do              {                   console.log ($ ("#fix"). Val ())               } (        },500);});

　　

HTML5 input real-time detection and delay optimization