什么是防抖和节流,怎么实现一个防抖和节流?
什么是防抖?
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
防抖实现方式:
// func是用户传入需要防抖的函数
// wait是等待时间,若不传参,默认50ms
// 因为闭包,timer将一直在内存中
const debounce = (func, wait = 50) => {
// 缓存一个定时器
let timer = null;
// 返回的函数是每次用户实际调用的防抖函数
return (...args) => {
// 如果已经设定过定时器了就清空上一次的定时器
if (timer) clearTimeout(timer);
// 开始一个新的定时器,延迟执行用户传入的方法
timer = setTimeout(() => {
func.apply(this, args);
}, wait);
};
};
什么是节流?
功能:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效
节流实现方式:
// 函数节流,时间戳版本
// func是用户传入需要防抖的函数
// wait是等待时间,若不传参,默认50ms
// 因为闭包,falg将一直在内存中
const throttle = (func, wait = 50) => {
// 定义falg,初试为true
let flag = true;
// 返回的函数是每次用户实际调用的节流函数
return (...args) => {
if (flag) {
// 如果flag为true,则执行定时器
setTimeout(() => {
func.apply(this, args);
// 函数执行完毕后,将flag改回true
// 以便下次再执行
flag = true;
}, wait);
}
// 因为定时器是异步任务,定时器执行后,立刻将flag关闭
// 在等待延时时间时,阀门始终关闭,不会一直执行函数
flag = false;
};
};
两者的使用场景有哪些?
函数防抖: 频繁操作点赞、登录注册、需要提交最新信息等等
函数节流: 懒加载分页请求资源、音乐播放进度条更新等等