防抖与节流

1.概念

防抖（debounce）是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次。

节流（throttle）是指在一定时间内执行的操作只执行一次。

2.作用

防抖和节流都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或者卡顿的现象。

3.两者的区别

共同点：

• 都可以通过使用setTimeout实现
• 目的都是降低回调执行频率，节省计算资源。

不同点：

• 防抖在一段连续操作结束后，处理回调，利用clearTimeout和setTimeout实现，
• 防抖在一定时间连续触发事件，只在最后执行一次，而节流一段时间内只执行一次。

4.原理

函数节流和函数防抖巧妙的使用setTimeout来存放执行的函数，这样可以很方便的利用clearTimeout在合适的时机来清除待执行的函数。

5.应用场景

防抖：

• 输入框中频繁的输入内容，搜索或者提交信息；
• 频繁的点击按钮，触发某个时间；
• 监听浏览器滚动时间，完成某些特定操作；
• 用户缩放浏览器的resize事件；
• 手机号，邮箱验证输入检测；

节流：

• 游戏中的一些设计；
• 监听页面的滚动事件；
• 鼠标移动事件；

6.防抖

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
 
// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
 
// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);

7.节流

// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 
// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
 
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);