propertychange实现输入框实时搜索，同时实现防抖和节流

propertychange一般用在jquery项目中，vue项目用watch即可实现输入框的实时监听。

propertychange的绑定方法如下：

<input type="text">

$('input').on('input propertychange',function(){
//当输入框内容发生变化即会触发此操作
})

简单介绍一下防抖和节流的原理和区别

防抖：在事件触发n秒后，执行后续操作，如果在此时间内再次触发该事件，则重新计时。

以输入框实时搜索为例，用定时器方式实现，代码如下：

var timeOut;
$('input').on('input propertychange',function(){
			clearTimeout(timeOut);
            timeOut = setTimeout(function(){
                console.log(1)
            },3000)
})

节流：在n秒内，只触发一次该事件，如果在此时间内多次触发该事件，只执行一次。

同样以搜索框实时搜索为例，用定时器方式实现，代码如下：

var timeOut;
$('input').on('input propertychange',function(){
            if(!timeOut){
                timeOut = setTimeout(function(){
                    timeOut = null;
                    console.log(1)
                },3000)
            } 
})        

有其他更简单的方法欢迎留言交流~