防抖及应用场景
防抖,顾名思义,防止抖动,以免把一次事件误认为多次事件
防抖重在清零 clearTimeout(timer)
场景①: 登录、发送短信等按钮避免用户点击太快,以致于发送多次请求,需要防抖
场景②: 调整浏览器窗口大小,resize次数过于频繁,造成计算过多,此时需要一次到位
场景③: 文本编辑实时保存,当无需任何更改操作一秒后进行保存
function debounce(fn, wait) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
fn(...args)
}, wait)
}
}
节流及应用场景
节流,顾名思义,控制事件发生的频率 ,如控制1s发生一次,甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流(Rate Limit)类似。
节流重在开关锁 time= setTimeout,timer=null
场景①:scroll事件,每隔1秒计算一次位置信息等。
场景②:浏览器播放事件,每隔1秒计算一次进度信息等。
function throttle(fn, wait) {
let timer
return (...args) => {
if(timer) return
timer = setTimeout(() => {
fn(...args)
timer = null
}, wait)
}
}