防抖与节流
防抖和节流都是为了限制函数的执行频次,避免响应速度跟不上触发频率,从而导致的延迟、假死、卡顿的现象。
定义
防抖:调用动作n秒之后,才会执行该动作,如果在n秒之内又调用了此动作则重新计算执行时间;
节流:预先设置一个执行周期,当调用动作的时刻大于执行周期时,执行该动作,然后进入下一个执行周期;
区别
-
防抖是将多次操作合并为一次操作,节流是在一定时间内只触发一次函数
-
防抖只会在最后一次才触发函数,节流是在一定时间内一定会执行一次函数
-
防抖可以用于用户输入,节流可以用于页面滚动,无限加载
实现
// 防抖函数
function debounce(fn) {
let timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
});
};
}
// 处理函数
function handle() {
console.log(value);
}
<input onChange={(value)=>debounce(handle(value))}>
// 节流函数
function throttle(fn) {
let canRun = true;
return function () {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, 500);
};
}
function handle(e) {
console.log(e.target.innerWidth);
}
window.addEventListener("resize", throttle(handle));