js节流
需求:监测输入框变化,然后获取用户输入内容,根据内容实时更新展示结果。这时候如果不是本地静态数据的话,可能需要发送服务器请求,但是检测时如果使用oninput,onkeyup事件时,用户每键入一个字我们就要发一个请求,服务器压力会很大,所以我们需要用到节流。
var obj = {};
function searchResult(keywords){
clearTimeOut(obj.g);
obj.g = setTimeout(function(){
//这里发送请求
},1000)
}
检测到输入框变化后,先清除定时器事件,因为由于用户连续输入,现在已经有这个定时器了,我们清除掉它,然后定时器延时是1S,也就是说,后续1S内输入框没有任何变化,我们才去服务器请求。这个间隔时间也不能太长,因为太长就达不到实时的效果了
绑定在一个空对象上是演示需要,我们写代码自己有自己的类,绑在自己类上面就好了,因为不定义的话,直接g是会报错的,绑定在一个空对象上就算首次执行没有这个属性,也不会报错。