防抖策略(debounce):是当时间被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时
好处:能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次
场景:用户在输入框中连续输入一串字符串时,可以通过防抖策略,只在输入完成时,才执行查询的请求,这样可以有效的减少请求次数,节约请求资源
防抖的实现:
function antiShake(fn,wait){
let timeOut = null;
return args=>{
if(timeOut) clearTimeOut(timeOut)
timeOut=setTimeout(fn,wait)
}
}
节流策略(throttle),顾名思义,可以减少一段事件内事件的触发概率
场景:鼠标连续不断的触发某些事件(如点击),只在单位事件内触发一次,懒加载时,要监听计算滚动条的位置,但不每次滑动都触发,可以降低计算的概率,而不去浪费CPU资源
节流实现:
function throttle(event,time){
let timer = null;
return function(){
if(!timer){
timer=setTimeout(()=>{
event();
timer=null
},time)
}
}
}
总结:
防抖:如果事件被频繁触发,防抖只有最后一次触发生效,前面n多次的触发都会被忽略
节流:如果事件被频繁触发,节流能够减少事件触发的概率。因此,节流是有选择的执行一部分事件