防抖:在频繁触发的模式下,我们只识别“一次”。
function debounce(){
let timer = null;
return function (){
if(timer){
clearTimerout(timer);
}
timer = setTimeout(()=>{
fn();
timer = null;
},delay)
}
}
input.addEventListener('keyup',debounce(function(){
console.log(input.value);
}),500)
节流:降低触发的频率,比如我们设定频率是300ms,在疯狂触发的时候,我们控制间隔300ms才让其执行一次。
function throttle(fn,delay){
let timer = null;
return function (){
if(timer){
return;
}
timer = setTimeout(()=>{
fn();
timer = null;
},delay)
}
}
div.addEventListener('drag',throttle(function(ev){
console.log(ev.target);
}),300)