防抖与节流
- 节流 throttle 在指定的时间间隔内只执行一次function
- 防抖 debounce 只有当时间超过指定的时间间隔后才会触发function`
节流函数
function throttle(fn, interval = 300) {
let flag = true;
return function () {
if (!flag) return; //在定时器间隔时间触发前,不会触发
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, interval);
};
}
防抖函数
function debounce(fn, interval = 300) {
let timeout = null;
return function () {
clearTimeout(timeout); //在间隔时间内触发,会清空计时器
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, interval);
};
}
用途
节流:滚动条滚动时增加判断逻辑
防抖:用户在input框内输入名称