js的防抖、节流

JavaScript026

js的防抖、节流,第1张

防抖和节流，这是前端防止用户频繁调用同一个接口的方法，比如短时间重复点击上传同一个文件，短时间重复点击提交同一个评论，异步的操作还没给你带来反馈，于是你重复上传了多个文件，重复提交了多个评论。

举例一个场景：为了例子更加简单，我们就用延迟来模拟一个后端接口返回的过程。

以上是一个发表评论的例子，由于接口一秒后才会响应评论反馈到界面上。

用户本意只是发布一条评论，但是由于接口需要响应时间，他以为自己的第一次点击没有生效于是就多点击了两次，结果显而易见，就是非用户本意的发布了三条一样的评论。

我们希望的是用户不要在请求还在进行的时候，频繁的重复发送请求。这时候就需要防抖节流了。

快速点击几次，还是只会发送一条评论。

但是缺点就是用户得到响应的时间更久了，得要算上延迟加上接口的响应。

速点击几次，还是只会发送一条评论。只有一条请求发布成功之后，才能够发布第二条请求，对于该场景十分合适。

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

为解决该问题，探索到了两个解决方案：

直接使用lodash工具库的debounce方法

参考网址： https://blog.csdn.net/qq_39139322/article/details/103295326

应用场景： 滚轮滚动触发事件频繁，加上延迟可低频触发

看过了上面闭包防抖的写法，下面闭包节流的写法也很好理解了~