HTML5 input real-time detection and delay optimization

This article mainly introduces the real-time detection and delay optimization of html5 input input. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

The first idea is 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 and found that the

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

method does work, but it needs to be changed 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(){    //延迟0.5s执行
                   console.log($("#fix").val())
        },500);
});

The problem comes again. The timer is asynchronous. Although it is delayed, it will still be executed and nothing has changed.

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.

Time stamp method.

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

-----html-----

------script-----
var last;
$("#fix").on('input propertychange', function(event){
    //"#fix为你的输入框
       last = event.timeStamp;
       //利用event的timeStamp来标记时间，这样每次事件都会修改last的值，注意last必需为全局变量
       setTimeout(function(){    //设时延迟0.5s执行
            if(last-event.timeStamp==0)
               //如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）则做你想要做的事
              {
                   console.log($("#fix").val())
               }
        },500);
});

Summary

The above is an introduction to everyone The full content of real-time detection and delay optimization of HTML5 input input, I hope it will be helpful to everyone's learning. For more related tutorials, please visit Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of HTML5 input real-time detection and delay optimization. For more information, please follow other related articles on the PHP Chinese website!