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);