函数防抖和函数节流都是防止某一时间频繁触发,但是这两者原理却不一样
注意:下面两个是基础版本,会存在fn返回值无法处理问题
防抖
一段时间内只执行一次,例:
1.search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
2.window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次。
function debounce(fn, ms = 1000) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, args)
}, ms)
}
}
// 测试
const cons = () => { console.log('debounce') }
const debounceFn = debounce(cons, 1000)
window.addEventListener('scroll', debounceFn)
节流
间隔一定时间执行,例:
1.鼠标不断点击触发,mousedown(单位时间内只触发一次)。
2.监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断。
function throttle(fn, ms = 1000) {
let isContinue = true
return function (...args) {
if (!isContinue) return
isContinue = false
setTimeout(() => {
fn.apply(this, args)
isContinue = true
}, ms)
}
}
// 测试
const cons = () => { console.log('throttle') }
const throttleFn = throttle(cons, 1000)
window.addEventListener('scroll', throttleFn)