举例一个场景:为了例子更加简单,我们就用延迟来模拟一个后端接口返回的过程。
以上是一个发表评论的例子,由于接口一秒后才会响应评论反馈到界面上。
用户本意只是发布一条评论,但是由于接口需要响应时间,他以为自己的第一次点击没有生效于是就多点击了两次,结果显而易见,就是非用户本意的发布了三条一样的评论。
我们希望的是用户不要在请求还在进行的时候,频繁的重复发送请求。这时候就需要防抖节流了。
快速点击几次,还是只会发送一条评论。
但是缺点就是用户得到响应的时间更久了,得要算上延迟加上接口的响应。
速点击几次,还是只会发送一条评论。只有一条请求发布成功之后,才能够发布第二条请求,对于该场景十分合适。
2022.3.19补充
节流函数的另一种实现方式:
两者的区别:
防抖函数:在一定时间内执行一个方法多次,只执行最后一次。因为在事件触发会先清理timer,如果时间间隔不到则会被清理掉,只有你的间隔到了之后才会执行,因此前面的函数都会被清理掉。
节流函数:在一定时间内执行一个方法多次,只有第一次生效。因为在事件触发后会先判断timer是否存在,只有不存在的时候才会执行。
相当于防抖是强制清理,节流是不到时间进不了大门。
应用场景: input输入信息进行搜索,如果每敲一个字符就请求后台接口,给后台的压力太大了,所以做好防抖,即让程序只执行最后一次的事件。
为解决该问题,探索到了两个解决方案:
直接使用lodash工具库的debounce方法
参考网址: https://blog.csdn.net/qq_39139322/article/details/103295326
应用场景: 滚轮滚动触发事件频繁,加上延迟可低频触发
看过了上面闭包防抖的写法,下面闭包节流的写法也很好理解了~