版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_29150765/article/details/82496172
需求
模糊查询
在输入框中输入内容
需要在下拉框中实时显示搜索结果
类似百度搜索提示
粗暴的解决方案
给输入框绑定监听事件,可选:
- onkeydown:键按下的过程
- onkeypress:键被按下
- onkeyup:键被松开
- onchange:元素失去焦点后触发
- input:元素值发生变化立即触发
通过监听这些事件,向后台发送请求获取数据
问题
输入速度快时,或者用输入法输入汉字时
会频繁向后台发送请求,达到预期效果
优雅的解决方案
使用js函数去抖动或节流,可选方案:
- debounce:去抖动
- throttle:节流
以上两个单词并不是说js中有这样分装好的方法,是不过是英文翻译而已
使用debounce
思路:
输入框触发事件,发送后端请求放到setTimeout函数中,使其延迟XXX秒后发送
如果在XXX秒内输入框又触发事件
那么关闭上一个setTimeout函数,继续延迟XXX秒
。。。
clearTimeout(this.timer)
this.timer = setTimeout(function(){
ajax.get()//后端请求
},XXXX) //延迟时间
节流就是忽略多次频繁的请求,只发送最后一次
使用throttle
设置发送请求的间隔,只要过XXX秒就发送一次
扫描二维码关注公众号,回复:
4587741 查看本文章
参考:
js函数节流和去抖动