举例一个场景:为了例子更加简单,我们就用延迟来模拟一个后端接口返回的过程。
以上是一个发表评论的例子,由于接口一秒后才会响应评论反馈到界面上。
用户本意只是发布一条评论,但是由于接口需要响应时间,他以为自己的第一次点击没有生效于是就多点击了两次,结果显而易见,就是非用户本意的发布了三条一样的评论。
我们希望的是用户不要在请求还在进行的时候,频繁的重复发送请求。这时候就需要防抖节流了。
快速点击几次,还是只会发送一条评论。
但是缺点就是用户得到响应的时间更久了,得要算上延迟加上接口的响应。
速点击几次,还是只会发送一条评论。只有一条请求发布成功之后,才能够发布第二条请求,对于该场景十分合适。
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,简而言之,防抖就类似回城,打断就得重新回。
代码实现
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。简而言之,节流就类似技能需要冷却时间到了才能用。
代码实现