关于防抖与节流

防抖和节流是在前端学习中无法绕过的一部分,它们在前端的项目优化中起着重要的作用,关于防抖节流我们讨论这几个问题

  • 1、如何实现
  • 2、防抖和节流的区别
  • 3、分别在什么场景使用

防抖

防抖,字面意思就是防止抖动。

当用户在使用输入框输入数据时,用户不停的在输入数据,而我们又不能每次用户一输入就发送请求或其他操作,这个过程就可以称作为抖动。所以为了防止抖动,就需要在用户结束输入后在进行下一步操作。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
const debounce = (fn, delay, args) => {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
};
};

我们通过定时器来停止掉上一个已经执行的任务,直到用户停止输入的时间达到delay的要求,才能进行下一步操作

节流

节流,就是节省交互沟通

在drag或者scroll时间期间要进行某一操作,这时就不能使用防抖了。如果使用防抖的话就会在drag和scroll事件结束后进行下一步操作,但是这达不到在事件触发期间进行操作。这时我们就要使用到节流函数,每隔一定时间只触发第一次事件就好了

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
const throttle = (func, wait, args) => {
let timer = 0;
return function () {
if (timer) {
return;
}
timer = setTimeout(() => {
func.apply(this, args);
timer = 0;
}, wait);
};
};

节流也是通过定时器来将后面想要触发的事件通过return直接结束掉,这样就只有第一次触发的事件会执行了。

二者的区别

从代码上看防抖和节流的代码相似度极高,而二则的区别就在于:

防抖:

1
2
3
if (timer) {
clearTimeout(timer);
}

节流:

1
2
3
if (timer) {
return;
}

而这段代码也是防抖和节流的特点所在了。

防抖函数在每一次都有内容后进行清除是为了保证当前执行的函数就是当前规定的时间内执行的最后一次操作,而清除的则是上一次执行的函数。

节流函数如此操作是为了保证,在规定的时间内只会执行一次这个操作,其他后续的操作都会直接return,这就是两个函数从代码上看到的不同

使用场景

  • 防抖:可以无限限次触发,但是在指定的时间内监听到没有新的触发事件了,就触发最后一次事件。
    • search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
    • window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
  • 节流:不管触发多少次,在指定的时间到了以后,指定的第一次hi见必须触发一次。
    • 鼠标不断点击触发,mousedown(单位时间内只触发一次)
    • 监听滚动事件,比如是否滑到底部自动加载更多,用节流来判断