函数防抖与节流

函数防抖与节流

js防抖和节流也就是在我们平常开发中频繁处理dom事件时会用到的。

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数频繁调用，会加重浏览器的负担，导致用户体验差，这时候我们就可以采用防抖与节流的方式来减少调用的频率，同时也不会影响效果。

函数防抖

函数防抖（debounce）：是指事件被触发第几秒后才会执行回调，就是如果在这几秒内事件又被触发，它就会重新去计算

函数防抖的应用场景：

对于连续的事件响应我们只需要执行一此回调：

每次resize和scroll触发统计事件

按钮点击事件

---

函数节流

函数节流：（throttle）：是指在规定的一个单位时间，在这个单位时间内，只能有一次触发事件执行回调。如果在同一个时间单位内某个事件被触发了多次，那么它只会生效一次

函数节流的应用场景

需要间隔在一定时间触发回调来控制函数使用频率：

DOM圆熟的拖拽功能（mousemove）

计算鼠标移动的距离（mousemove）

onScoll

---

总结

一句话总结函数防抖节流：防抖是将多次执行的变成最后一次执行，节流是将多次执行的变成每个一段的时间执行。