Shulou(Shulou.com)06/02 Report--

Today Xiaobian to share with you what the html5 input real-time detection and delay optimization method is the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

There is a project that, in this case, the input box monitors the input in real time and triggers the request.

The first idea is the onchange () method on input, which is not easy to use. It is only when the value change is confirmed that it will trigger, not immediately.

Looked it up on the Internet.

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

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

Add a timer setTimeout.

$("# fix") .on ('input propertychange', function (event) {setTimeout (function () {/ / delay 0.5s execution of console.log ($("# fix") .val ()}, 500);})

Here comes the problem again, the timer is asynchronous, although delayed, but it will still be executed, nothing has changed.

Later, I thought of unbinding unbind,bind, but I couldn't get the events of keyboard input during the unbinding time.

The first idea was to trigger the event-delete the timer-add the timer-execute the function. Found that it is still not good, the timer can not be deleted, simply do not carry out.

Finally, I looked it up on the Internet and found a new method.

Time stamp.

The principle is that every time the input modifies the global variable, timestamp, delay 0.5s to monitor the new timestamp and equal to the bound timestamp, proceed to the next step.

-html-script-var last;$ ("# fix"). On ('input propertychange', function (event) {/ / "# fix is your input box last = event.timeStamp / / use the timeStamp of event to mark the time, so that each event will change the value of last Note that last must delay the execution of if (last-event.timeStamp==0) for 0.5s for the global variable setTimeout (function () {/ /) / / if the time difference is 0 (that is, no other keyup events occur within 0.5s when you stop typing), do what you want to do {console.log ($( "# fix") .val ()}} 500) The above is all the contents of the article "what is the method of real-time detection and delay optimization of html5 input?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.