函数节流与函数防抖

戏言

        什么是节流？顾名思义，为了节省流量呗，怎样节省流量？那就是少发送请求呗。

        什么是防抖？就是防止手抖了造成多次点击，那多次几点了怎么办，用函数防抖啊。

        666，这解释精辟啊！

        上面虽然只是一个玩笑，但是大概意思其实也差不多了。下面来看看这两货的概念：

节流（throttle）：连续触发事件但是在n秒内只执行一次函数

防抖（debounce）：触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

怎么理解？？？很简单，我给你们翻译一下，就很清楚了。

节流：这个比较霸道，就是当一个函数要执行的时候，它会划分一个时间区域，意思是说：这段时间我在执行了啊，都别来烦我了，所以当你再次触发它的时候，它也不会理你，直到过了它的时间区域。反正不管你触发多少次，它只要执行了，就懒得理你，也就是说执行的是第一次。

防抖：这个则比较懒，就是当一个函数在执行之前，它会机智的等待一段时间（比如1秒），看这段时间是不是还有再次来触发它的（免得总是叫它执行），如果没有了，那就执行吧，如果还有的话，那就再等1秒，看看还有没有来触发的，反正不管你触发多少次，它都只执行最后一次。

从上面这么形象的翻译里面，我们不难看出它们的原理了：

节流：第一次触发执行的时候，设置一个时间段，在这个时间段里再次触发的都将被忽略，我就是这么霸道！！！这里时间段的设置，可以是时间的对比，也可以是直接设置一个setTimeout，个人倾向于通过之间的对比来设置。

防抖：被触发的时候，先设置一个等待的时间，在这个时间里再有触发，那么之前的触发就作废了，我再次重新等待相同的时间，如果过了这段时间没有被触发了，那我就执行，我就是这么懒！！！

下面来看代码：

最后来说下使用场景：

节流： 滚动加载更多、搜索框搜索联想功能... ...

防抖：搜索框输入完以后自动搜索、手机号或者邮箱输入完后校验、高频点击重复提交、窗口大小变化后resize，需要重新渲染... ...

PS：有很多人将高频点击归于节流，但是最近我碰到一个问题，我设置一个提交按钮的时间间隔是500ms，发现当测试员连续点击一秒的时候，还是会发起两次提交，搞得我不得不改为防抖，所以个人还是倾向于将高频点击重复提交归于防抖里面，智者见智，仁者见仁啊！