防抖(debounce)
触发事件n秒内,函数只会执行一次,如果在n秒内再次触发事件,则会重新开始计算时间
使用场景:多用在用户频繁输入操作,用防抖来节约请求资源。
function debounce(fn,await) {
let delay = await || 300
let timer
return function () {
if(timer) clearTimeout(timer)
timer = setTimeout( () => {
timer = null
fn.apply(this,arguments)
},delay)
}
}
节流(throttle)
连续触发事件但是在 n 秒中只执行一次函数
使用场景:多用于onrize,onscroll等这些频繁触发的函数
function throttle(fn,t){
let last
let timer
let interval = t || 500
return function (){
let now = +new Date()
if(last && now - last < inerval) {
clearTimeout(timer)
timer = setTimeout(() => {
last = now
fn.apply(this,arguments)
},inerval)
} else {
last = now
fn.apply(this,arguments)
}
}
}