JavaScript防抖(debounce)和节流(throttle)
防抖
例如实时显示搜索框时,一定时间内只需要函数执行一次。
function debounce(fn,interval){
let timeout = null;
return function(){
clearTimeout(timeout);
timeout = setTimeout(()=>{
fn.apply(this,arguement)
},interval)
}
}
节流
例如鼠标移动需要触发的函数,由于事件触发的频率过快,需要在一定时间触发一次函数,控制函数触发的频率。
function throttle(fn,interval){
let canRun = true;
return function(){
if(!canRun)return;
canRun = false;
setTimeout(()=>{
fn.apply(this,arguement);
canRun = true;
},interval)
}
}