搜索提示：js函数节流和去抖动的方法

版权声明：本文为博主原创文章，转载请注明出处。 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秒就发送一次

---

参考：
js函数节流和去抖动