logo

节流与防抖

节流(throttle)与 防抖(debounce)是为了解决回调执行过于频繁导致的性能问题,进一步影响用户体验,增加服务器压力。这两个概念略微有所不同,应用场景也有所不同。

节流(throttle)

概念

节流概念关键在于降低函数的触发频率,在一段频繁的函数回调中每隔一段时间执行一次。

场景

  • 需要监听频繁触发的事件,如监听 scroll 事件实现图片懒加载,keybord 事件实现搜索查询节流。
  • …so on

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function throttle(fn, interval) {
var timer,
sTime = +new Date();

interval = interval || 250;
return function() {
var args = arguments,
nowTime = +new Date(),
that = this;

clearTimeout(timer); /*清除下面定义的setTimeout*/
if (nowTime - sTime > interval) {
/*计算时差*/
fn.apply(this, args);
sTime = nowTime;
} else {
/*确保至少执行一次*/
timer = setTimeout(function() {
fn.apply(this, args);
}, interval);
}
};
}

防抖(debounce)

概念

防抖概念关键在于在一段频繁函数调用中只执行一次。

场景

  • 在短时间用户频繁交互,如发送手机验证码,异步提交表单数据。
  • …so on

实现

延迟执行

1
2
3
4
5
6
7
8
9
10
11
function debounce(fn, interval) {
var timer;
return function() {
var that = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(that, args);
}, interval);
};
}