Js中防抖和节流的区别,论如何避免重复点击

JavaScript066

Js中防抖和节流的区别,论如何避免重复点击,第1张

在进行窗口的resize、scroll,输入框内容校验,防止按钮重复点击等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,体验糟糕。所以可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。

我们一起先来看看防抖和节流的区别

防抖函数 debounce

节流函数 throttle

如何调用

防抖和节流都利用了闭包,首先就调用了debounce和debounce方法,把内部的方法返回出去,下次自己执行,以后有时间我再写一下闭包吧,所以我还留下一个问题,这样会不会造成内存泄漏?

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

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

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

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

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

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

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

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

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

为解决该问题,探索到了两个解决方案:

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

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

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

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