前端高级-节流与防抖

在面对一些用户的频繁操作时,如滚动、输入、频繁点击等,需要不断响应,这样难免会造成一些性能浪费和消耗,防抖与节流就是来解决这一问题的。

什么是防抖(debounce)?

对同一个函数F,两次调用时间间隔大于T时才执行(如用户表单输入事件触发间隔大于15ms时才发送ajax请求)。

简单实现:

1
2
3
4
5
6
7
8
9
10
function debounce(fn, delay) {
var timer = null;
return function() {
var args = arguments;
timer && clearTimeout(timer);
timer = setTimout(e => {
fn.apply(this, args);
}, delay);
}
}

应用:

  • 表单搜索提示
  • 窗口 resize 事件

什么是节流(throttle)?

对同一个函数F,每隔一定时间T执行一次(如处理滚动事件时,每隔20ms执行一次)。

简单实现:

1
2
3
4
5
6
7
8
9
10
11
12
function throttle(fn, delay) {
var canRun = true;
return function() {
var args = arguments;
if (!canRun) return;
canRun = false;
setTimeout(e => {
fn.apply(this, args);
canRun = true;
}, delay);
}
}

应用:

  • 页面滚动
  • 拖动

防抖与节流的其他实现

建议使用 lodash 的节流和防抖。

注意:除了使用 setTimeout ,还可以用 requestAnimationFrame 实现。

参考