什么是防抖和节流?有什么区别?如何实现?
节流是在一定时间内只能触发一次,可以应用于监听滚动条,减少同一时间触发的次数
防抖是触发后一定时间才会调用并且重新触发又会重新计时,可以用于监听input输入合法性
防抖
const throttle = (fn, sec) => {
if (typeof fn !== 'function') return
let flag = true
return function () {
if (!flag) return
fn.apply(this, [...arguments])
flag = false
setTimeout(() => {
flag = true
}, sec);
}
}
节流
const debounce = (fn, sec) => {
if (typeof fn !== 'function') return
let timer = null
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, [...arguments])
}, sec);
}
}
网友评论