JS---函数节流（throttle）和函数防抖（debounce）

最近学习防抖和节流，在网上看了很多文章，终于弄清楚了这两个概念，同时推荐一篇写的非常清楚的文章：文章链接。本问中部分概念和说法也是来自于这篇文章。

什么是函数节流（throttle）和函数防抖（debounce）

根据名字就可以形象的理解：

• 函数节流（throttle）：假设有一个水龙头在不停的往下滴水，这个时候 ，我们可能会希望水滴的慢一点，比如让它能够每200ms滴一次，而不是一直滴，这个时候我们用到的就是函数节流（throttle）。
• 函数防抖（debounce）：假设有一个弹簧，我们时不时的按一下，松一下，弹簧每松一下都会向上回弹，此时，这个时候我们会希望，只有当最后一次我们松手时，弹簧才回弹，这时候我们用到的就是函数防抖（debounce）。

有了这个理解后，我们再来规范概念：

• 函数节流（throttle）：阻止一个函数在很短时间间隔内连续调用。只有当上一次函数执行后，到达一定的时间间隔，才能进行下一次调用，但要保证一个累计最小调用间隔。
• 函数防抖（debounce）：阻止一个函数在执行完之前，在次被调用。只有当前函数执行完之后，才能再次被调用。

读完上面两个概念，多少又凌乱了，从字面上看，他们的区别仅仅在于下一次可以被调用的时机。也就是说，节流控制下的异步函数，不管上一个调用是否执行完毕，到达一定的时间后，我们再一次调用这个异步函数，也是可以调用成功的。防抖则不同，防抖控制下的异步函数，在上一次异步函数执行完返回结果之前，我们都不可以再次调用这个异步函数，这样又清楚了好多。

函数节流（throttle）和函数防抖（debounce）的适用场景

函数节流（throttle）多被用在onresize()、onscroll()等短时间内多次触发的事件。比如：当我们为了节约数据传输量而设计一个滚动加载的页面，这个时候我们监控用户的鼠标滚动，当用户鼠标滚动时，想服务器发出一次请求，但是这样的话，用户鼠标滚动的同时，我们的浏览器就会向服务器发送上百个请求。这样的话不仅不能节约数据传输量，还会增加服务器负担。我们通过节流控制，让用户鼠标滚动的时候，对比一下上一次请求的时间，如果时间较短，则不向服务器发出请求。这样便控制了向浏览器发送请求的频率，提高了性能。
函数防抖（debounce）多数被用在按钮上。比如：当我们网络情况不好的时候，用户往往会习惯性的多次点击登录按钮，但是，当第一次的登录请求返回后（大多数情况下，第一次请求会先返回），客户端便完成了登录，其他的登录请求都是无用请求。所以我们必须控制，只有当用户第一次的请求返回后，用户才可以进行下一次请求。

原理

• 函数节流（throttle）：使用定时器做时间节流。当触发一个事件时，先用setTimeout让这个事件延迟一小段时间再执行。如果这个事件段内又一次触发了这个事件，则我们清空当前的定时器，重新setTimeout一个新的定时器来执行这个函数。
• 函数防抖（debounce）：防抖的原理则是判断当前异步函数是否执行完成。在当前函数执行之前预先设定一个变量标记函数可以被执行，当函数被调用时，根据标记变量来判断函数是否可以被调用。如果可以被调用则将标记变为不可被调用，然后执行函数，当函数执行完后，再将标记变为可以被调用。