节流和防抖

节流和防抖

https://zhuanlan.zhihu.com/p/501685828

我之前一度不太理解节流和防抖之间的区别，老是容易把它们混为一谈

函数防抖（在上一个函数触发后的规定时间之内，再次触发函数，则会重新计时，也就是函数会被推迟触发，只有事件间隔内的最后一次触发事件才会执行）：将多次事件合并成了一个操作，本质上就是在维护一个延时器，规定在指定的时间后触发函数，但是如果在这个期间，事件被再次触发，就会取消之前的延时器从而重新计算时间，这样一来，实际上也就是只有最后一次事件才会执行。

函数节流（函数触发不会被推迟，但是规定时间间隔内只允许触发一次，规定时间内的其他触发会被忽略）：一段时间内，只执行一次事件，本质就是判断是否该事件正在执行。

区别：函数节流不管事件触发有多少次，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

使用场景：

1. 滚动事件或者窗口大小发生改变时，实际上只需要在用户停止操作的时候，执行一次函数，也就是用户可以一直拉动滚动条或者改变窗口的大小，直到满意的位置或大小停止后才去触发这个函数，因此用函数防抖更合适
2. 在无限加载页面的场景下，比如淘宝商品列表可以一下向下刷新数据，这种场景下，我们需要在用户滚动屏幕的时候，每隔一段时间做一次ajax请求，而不是等用户停止滚动页面之后再请求数据，这样用户等待的时间就变长了，因此用函数节流更合适。