实现防抖节流
防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能或者说避免资源浪费。毕竟JS操作DOM对象的代价还是十分昂贵的。
应用场景:处理一些频繁触发的事件,例如mousedown、mousemove、keyup、keydown等,不然的话,页面很可能会十分卡顿哦~
防抖
防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
举个例子吧:
例如,你是一个肯德基外卖配送员,每天专门配送去学校的外卖(不考虑配送时间)。
如果每次只配送一单,肯定很划不来。
你接到一个配送订单,心里想在等3分钟,如果3分钟没有配送订单我就配送
如果又有一个配送订单,你就会想再等3分钟,
直到3分钟没有什么外卖订单,就开始配送
那么用代码怎么实现呢?
//接一个订单,和等待时间
function debounce(fn, delay){
let timerId = null
return function(){
const context = this
//如果接到订单就再等3分钟
if(timerId){window.clearTimeout(timerId)}
//3分钟没有接到订单就直接配送
timerId = setTimeout(()=>{
fn.apply(context, arguments)
timerId = null
},delay)
}
}
节流
节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率
function throttle(fn, delay){
// 设置一个触发开关
let canUse = true
return function(){
//如果为true,就触发技能,否则就不能触发
if(canUse){
fn.apply(this, arguments)
//触发技能后,关闭开关
canUse = false
//在3秒后打开开关
setTimeout(()=>canUse = true, delay)
}
}
}