理解
防抖主要关注于一段连续操作结束后,处理回调 ex:用户输入框查询
节流主要是防止用户的误操作导致一些不必要的错误发生,间隔时间段触发事件ex:用户提交表单时,快速多次点击可能导致生成相同时间段的单据
实现
防抖和节流都是通过定时器来实现,防抖在于一段时间内如何多次触发事件,则清除定时器,直到用户没有再进行触发。节流则在于不管用户点击了多少次,都按照一定的时间间隔执行函数。
防抖就相当于回城读条,取消后需要重新开始。
节流相当于技能冷却
代码
function debounce (func,delay){ 防抖
let timer = null
return function(){
timer && clearTimeout(timer)
timer=setTimeout(()=>{
func.apply(this,arguments)
},delay)
}
}
function throttle (func,delay){ 节流
let flag=false
return function (){
if(flag) {
return
}
flag = true
setTimeout(()=>{
flag=false
func.apply(this,arguments)
},delay)
}
}
通过两段代码的比较可以看出,防抖和节流实现的原理。在开发过程中使用节流和防抖可以在一定程度上减少服务器的压力(减少请求的次数)
ex:通过按钮的禁用,来防止用户的重复操作