1. 防抖
防抖规定函数至少间隔多久执行。 代码案例如下:
function debounce (fn, delay){
let timer = null;
return function (e) {
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(()=>{
fn(e);
}, delay)
}
}
2. 节流
节流规定函数在某时间段内最多执行一次。 代码案例如下:
function throttle (fn, delay) {
let start = 0;
return funtion (e) {
let nowTime = Date.now();
if(nowTime - start >= delay) {
fn(e);
start = nowTime;
}
}
}
3. 总结
防抖和节流减少的都是事件处理函数的次数,而不是时间调用频率。当只需要处理最后一次触发事件时,使用防抖;当事件触发过于频繁,需要限制调用频率时,使用节流。
注:代码案例都是使用闭包实现防抖和节流。