再也不用担心老是忘记两者的区别,总结一下,加深记忆。
防抖: debounce
函数被触发n秒后执行,n秒内如果再次被触发,则重新计时,一般常见于输入框的查询回调。
// 利用定时器实现
export const debounce = (fn, delay) => {
let timer = null
return function () {
const ctx = this
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(ctx, arguments)
}, delay)
}
}
假如提莫回城需要8s,8s内被技能打中,回城中断,只有在按下B键8s内未受到影响,才能顺利回城。
节流: throttle
在一定的时间内,无论触发多少次回调,只执行一次回调函数。一般用于resize、scroll事件中。
利用Date.now()
时间戳实现
// 执行头部,不执行尾部
export const throttle = (fn, delay) => {
let time = Date.now()
let curTime
return function () {
curTime = Date.now()
if (curTime - time >= delay) {
fn.apply(this, arguments)
time = curTime
}
}
}
利用setTimeout()
定时器实现
// 不执行头部,执行尾部
export const throttle = (fn, delay) => {
let timer = null
return function() {
if(timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
提莫的Q技能CD为8s,那8s内无论按多少次键盘,也只能释放一次。