防抖和节流

js 中的防抖和节流函数

函数节流

节流其实就是说类似于同一个事件在被多次连续触发时,如果上一次的没有完成,就禁止当前的跑进去,挡在门外

函数防抖

防抖其实是说,每一次进去的时候,都重置状态,相当于把上一次的取消

看到很多大佬讲的防抖和节流都比较深入,其实我觉得可以简单点,看2个函数自己感觉下?

防抖
1
2
3
4
5
6
7
8
9
10
11
12
const debounce = (fn, delay) => {
let timer;
return function(...args) {
// 如果有定时任务,直接重置
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};

测试

1
2
3
4
5
6
const test = () => {
console.log(123123);
};

setInterval(debounce(test, 3000), 1000); // 无输出,因为1s会导致timeout被重置
setInterval(debounce(test, 3000), 4000); // 第一次等7s后输出,之后4s输出一次

其实很好理解,防抖就是说在我超时的时间内如果跑进来,就会直接重置我的超时,因此如果执行的间隔小与我超时的时间设置,就会导致永远不输出

函数节流

节流
1
2
3
4
5
6
7
8
9
10
11
12
const throttle = (fn, gapTime) => {
let timer;
return function(...args) {
// 如果有定时任务,就等待执行掉再处理
if (timer) return;
timer = setTimeout(() => {
fn.apply(this, args);
clearTimeout(timer);
timer = null;
}, gapTime);
};
};

测试

1
2
3
4
5
6
const test = () => {
console.log(123123);
};

setInterval(throttle(test, 3000), 1000); // 到第4s的时候输出,之后每3s输出一次
setInterval(throttle(test, 3000), 5000); // 到第8s的时候输出,之后每5s输出一次

节流是什么意思呢,就是说无论你外界怎么调用,必须要满足我的超时,在我超时等待的这段时间内不允许任何打断,因此当我超时是3s但是每隔1s就调用一次的时候,会被直接return,到我定时的任务执行之后,才允许下一个进来,但是如果我的时间间隔比你的执行时间要短,那么我一定会按照你的频率来执行,比如第2种情况会每隔5s输出一次

结论:

防抖就是在一定时间内触发的话直接重置我要执行的任务,从头开始。
节流就是说一定时间内,我的任务必须消化掉才能继续接收后面的,这中间的就直接丢弃了。

适用场景

防抖:

假设在某一个页面的input框上我们要做一个智能提示,就是说用户输入内容后,要去发请求获取提示的内容,当用户输入过快的时候,我们是没必要有变动就去发请求,这样对服务器的冲击太大了,这个时候可以利用防抖来做一个1s的delay,因为1s内如果用户连续输入也没必要去发请求。

节流:

假设有一个落地页,页面上有一个购买按钮,点这个按钮我们会发起支付请求,如果什么都不做的情况下用户会连续猛击20次的话,我们会发20个请求到后台去生成订单,这明显是不合理的,这个时候如果用节流函数来做,用户在1s内连续按多少次都没用,我们必须消化掉点击的第一次才能继续处理后面的流程。

坚持原创技术分享,您的支持将鼓励我继续创作!