js事件的防抖和节流处理

1.为什么需要处理？

在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。

那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。

滚动事件的应用很频繁会出现：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。

在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非常高，间隔很近。在日常开发的页面中，

事件中涉及到的大量的位置计算、DOM操作、元素重绘等等这些都无法在下一个scroll事件出发前完成的情况下，浏览器会卡帧。

2.防抖

一定在事件触发 n 秒后才执行，如果在一个事件触发的 n 秒内又触发了这个事件，以新的事件的时间为准，n 秒后才执行，等触发事件 n 秒内不再触发事件才执行。

官方解释：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

3.节流

如果持续触发事件，每隔一段时间只执行一次函数。

官方解释：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

总结：

防抖：原理是维护一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。

节流：原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。

区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。