首先我们要知道防抖以及节流是用来干嘛的。
js的防抖
//防抖的关键:对定时器的开始和清零
function debounce(callback,delayTime){
//定义一个定时器
let Timer = null;
return function(){
//如果定时器不为空,则需要重新记时
if(Timer!=null){
clearTimeout(Timer);
}
//如果定时器为空,则开始倒计时
Timer = setTimeout(()=>{
callback && callback();
}, delayTime)
}
}
js的节流
// 节流的关键在于:截留的开关阀 延迟的时间
function thorttle(callback,delayTime){
let state = true;//节流阀打开
// 每次执行改函数的时候都需要判断开关的开关阀状态
return function(){
// 如果节流阀关闭,则直接退出改函数
// 永远不会执行callback
if(!state){
return;
}
// 如果节流阀打开,则先把节流阀关闭
// 然后再设置的时间间隔(delaytime)后自动打开
state =false;
setTimeout(()=>{
callback&& callback();
state=true;
},delayTime)
}
}