关于防抖和节流

Posted 2020-11-26 lesliecn

现实中可能会出现这样一种情况，创建并提交某个表格时，可能手抖瞬间点击了两次提交，如果代码层面没有做任何处理，这两次提交将会触发两次请求并生成两次提交的结果，

简化一下就是，瞬间多次触发同一事件的情况，除了刻意为之的需要，一般情况下都需要避免这种情况的出现

防抖和节流其实是处理这一问题的两种解决思路：

1、防抖（debounce）

　　防抖简单来说就是延迟触发，在实际操作之后延迟设定的时间之后再去进行请求或者其他操作，在这个延迟时间之内，如果又进行了同样的操作，则每一次操作都会清除当前的倒计时并重新开启计时，也就是说只有最后一次操作才能能够真正的触发请求。

　　比如一个提交事件，设置了延迟300ms的防抖，瞬间多次，则每一次点击都相当于清除了前一次点击的效果而对延迟进行重新计时，理论上讲如果每次在上一次操作300ms之内又进行了同样的操作，则会子子孙孙无穷尽也，实际上这个操作将永远也不会执行...直到某一次操作过了300ms

2、节流（throttling）

　　节流的思路和防抖相反，不会进行延迟操作，但是在设定时间之内只执行一次操作，其他操作会被忽略掉，直到设定时间结束。也即是说，如果在设定的300ms之内，第一次操作一定会成功触发，其他操作将会被忽略，直到300ms延迟时间结束。

在实际开发中，尤其是使用渲染页面的函数时，要谨慎使用debounce操作，如果出现同一页面需要使用同一函数渲染多个相同的图表的情况，则不能使用防抖，因为渲染执行的速度比设定延迟时间短的话，会导致除了最后一次的渲染之外的操作都被防抖掉。

也就是说在进行一些必要的重复操作时要慎用防抖

 

按照我自己目前的经历，实际中防抖用的比较多，尤其是进行一些提交、创建之类的操作，除了能避免一些多次请求造成性能上的问题，更能避免出现同样的数据提交多次存储多次的后果

节流实际上还没有应用过，以后遇到了再记录...