函数的节流和防抖

前言

事件的触发权很多时候都属于用户，有些情况下会产生问题：

• 向后台发送数据，用户频繁触发，对服务器造成压力
• 一些浏览器事件：window.onresize、window.mouseover等，触发的频率非常高，会造成浏览器性能问题
  如果你碰到这些问题，那就需要用到函数节流和防抖了。

一、函数节流

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。

1.如何实现

其原理是用时间戳来判断是否已经回调该执行时间，记录上次执行的时间戳，然后每次触发scroll事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达规定时间，如果是，则执行，并更新上次执行的时间戳，如此循环。

2.函数节流的应用场景

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

• DOM元素的拖拽功能实现
• 搜索联想
• 计算鼠标移动的距离
• Canvas模拟画板功能
• 射击游戏的mousedown/keydown事件(单位时间只能发射一颗子弹)

二、函数防抖

防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

1.如何实现

其原理就是第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。

2.函数防抖的应用场景

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

• 每次resize/scroll触发统计事件
• 文本输入的验证(连续输入文字后发送ajax请求进行验证，验证一次就好)

总结

函数节流和函数防抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为DOM事件的监听回调，而这也是函数节流以及防抖多数情况下的应用场景。