防抖
防抖触发高频率事件秒后只会执行一次,如果n秒内再次触发,则会重新计算,每次触发时都会取消之前的延时调用。常用于下拉刷新,滚动事件
function debounce(fn,delay,immediate) {
let timer = null;
let that = this;
return () => {
if(immediate){
fn.call(that, arguments);
immediate = false;
}
clearTimeout(timer);
timer = setTimeout(() => {
fn.call(that, immediate);
}, delay);
}
}
节流
在指定间隔内任务只执行一次,在每次函数执行之前,先判断是否存在定时器,存在则跳过本次执行,否则设置新的定时器。常用于按钮点击事件
function throttle(fn, delay, immediate) {
let timer = null;
let that = this;
return () => {
if(immediate){
fn.call(that, arguments);
}
if(timer) return;
clearTimeout(timer);
timer = setTimeout(() => {
fn.call(that, arguments);
}, delay);
}
}
区别
函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。
防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。