html5怎么使用input输入实时检测以及延时优化？相关案例代码分享！

在现在这个高新技术发展迅速的时代相信很多人有过这样的经历就是在登录各种账号的时候都需要自己手动输入或者记住密码快速登录，那么今天我们就来说说有关于在“html5怎么使用input输入实时检测以及延时优化？”这个问题，下面是相关的内容希望对大家的学习和了解有所帮助。

有个项目是，这么个情况，输入框，实时监测输入，触发请求。

第一想法是​input​ 上的​onchange()​方法，试了一下，不好用，是值等更改确认了，才会触发，不即时。

上网查了一下，

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

方法的确可以用，但是实时更改。发送的频率有点快啊。

赶紧加个定时器​setTimeout​.

$("#fix").on('input propertychange', function(event){
   setTimeout(function(){    //延迟0.5s执行
                   console.log($("#fix").val())
        },500);
});

问题又来了，定时器是异步，虽然延迟，但是还会执行，没啥改变。

后来又想到解绑​unbind​，​bind​，但是解绑的时间里获取不到键盘输入的事件。

当时第一想法是，触发事件-删除定时器-添加定时器-执行函数。发现还是不好，定时器删不掉，干脆就不执行了。

最后上网查了一下，发现一种新方法。

时间戳法。

原理就是，每次输入修改全局变量，时间戳，延迟0.5s监测 新的时间戳和和绑定的时间戳相等，就进行下一步。

------html-----
<input type="text" id="fix">
------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);
});

总结

那么对于：“html5怎么使用input输入实时检测以及延时优化？”这方面的问题相信大家都应该有所了解了，那么对于更多有关于html5这方面的知识和相关内容我们都可以在W3Cschool中进行学习和了解。