【js】简单理解节流与防抖，搜索框的场景

Posted 2023-04-16

参考技术A 在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。

防抖的实现思路：每次触发事件时都取消之前的延时调用方法：

节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

JS的防抖和节流

参考技术A

应用场景： input输入信息进行搜索，如果每敲一个字符就请求后台接口，给后台的压力太大了，所以做好防抖，即让程序只执行最后一次的事件。
为解决该问题，探索到了两个解决方案：

直接使用lodash工具库的debounce方法
参考网址： https://blog.csdn.net/qq_39139322/article/details/103295326

应用场景： 滚轮滚动触发事件频繁，加上延迟可低频触发
看过了上面闭包防抖的写法，下面闭包节流的写法也很好理解了~