js的防抖、节流

JavaScript013

js的防抖、节流,第1张

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

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

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

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

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

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

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

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

在平时的编码过程中,当绐浏览器注册一个时间,经常会遇到一些执行次数非常频繁的事件,如scroll,resize等,事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况,为些我们需要通过一些手段来解决这个问题,所以就有了防抖和节流这两个技术。

是指在某段时间内,不管你触发了多少次回调事件,我都只认第一次,并在计时结束时给予响应,至于后面你再触发多少次回调我都不会予以回应。代码实现如下:

与事件节流怡好相反,事件防抖只认最后一次,不管你前面触发了多少次我都不管,我只执行你最后一次触发事件的回调,代码实现如下:

连续的事件,只需触发一次回调的场景有:

间隔一段时间执行一次回调的场景有:

在前端开发中会遇到一些频繁的事件触发,比如:

window 的 resize、scroll

mousedown、mousemove

keyup、keydown

……

防抖的原理就是:你尽管触发事件,但是我一定在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新的事件的时间为准,n 秒后才执行,总之,就是要等你触发完事件 n 秒内不再触发事件,我才执行,真是任性呐!

节流的原理:

如果你持续触发事件,每隔一段时间,只执行一次事件。

根据首次是否执行以及结束后是否执行,效果有所不同,实现的方式也有所不同。

我们用 leading 代表首次是否执行,trailing 代表结束后是否再执行一次。

关于节流的实现,有两种主流的实现方式,一种是使用时间戳,一种是设置定时器。

具体参考文章:

https://github.com/mqyqingfeng/Blog/issues/22

https://github.com/mqyqingfeng/Blog/issues/26