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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接: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函数节流和去抖动

展开阅读全文

没有更多推荐了,返回首页