【校招VIP】简述一下防抖和节流,以及应用场景

08月24日 收藏 0 评论 0 前端开发

【校招VIP】简述一下防抖和节流,以及应用场景

转载声明:文章来源:https://blog.csdn.net/muge1161105403/article/details/106649675

简述:
(1)防抖:就是将一段时间内连续的多次触发转化为一次触发。
(2)节流:减少一段时间内触发的频率
区别:两者区别在于函数节流是固定时间做某一件事,比如每隔1秒发一次请求。而函数防抖是在频繁触发后,只执行一次(两者的前提都是频繁触发)
场景:
(1)节流:一般是onrize,onscroll等这些频繁触发的函数,比如你想获取滚动条的位置,然后执行下一步动作;鼠标不断点击触发,mousedown(单位时间内只触发一次)…

比如你想获取滚动条的位置,然后执行下一步动作。如果监听后执行的是Dom操作,这样的频繁触发执行,可能会影响到浏览器性能,甚至会将浏览器卡崩。
我们可以规定他多少秒执行一次,这种方法叫函数节流
const throttle=(fn, delay) => {
//记录上一次函数触发的时间
let lastTime = 0;
return () => {
//记录当前函数触发的时间
let nowTime = Date.now();
if (nowTime - lastTime > delay) {
fn();
//同步时间
lastTime = nowTime;
}
}
};

(2)防抖:频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器;search搜索联想,用户在不断输入值时…

const debounce=(fn, delay) => {
//记录上一次的延时器
let timer = null;
return () => {
//清除上一次延时器
clearTimeout(timer);
//重新设置新的延时器
timer = setTimeout(() => {
fn()
}, delay)
}
};

C 0条回复 评论

帖子还没人回复快来抢沙发