什么是防抖、节流
-
防抖:每次触发都重新计时,直到指定时间结束都没有重新触发,执行的最后一次操作生效
类似于回城,直到指定时间倒数完,期间没有被打断,才能完成回城这个目标
-
节流:在指定时间内,多次触发,只执行第一次
类似于回城,直到指定时间倒数完,期间没有被打断,才能完成回城这个目标
防抖和节流的使用场景
- 防抖:搜索联想触发,手机号邮箱的格式验证
- 节流:高频点击按键,下拉自动刷新
手写防抖、节流
- 防抖
// 需要防抖的业务逻辑
function clickLast() {
console.log('添加功能')
}
function debounce(fn,delay) {
let timer
return function() {
//再次点击则重新计时
clearTime(timer)
setTimeout (() => {
// 调用逻辑处理函数
// 修正this的指向问题
fn.apply(this)
},delay)
}
}
// 使用防抖函数
addBtn.addEventListener('click',debounce(clickLast,2000))
- 节流
// 需要节流的业务逻辑
function clickFirst() {
console.log('添加功能')
}
function throttle(fn,delay) {
// 设置初始时间
let timer = 0
return function() {
// 获取现在的时间
let timeNow = Date.now()
// 如果距离上次触发时间大于指定时间,则执行对应函数回调
if(timeNow - timer > delay) {
// 调用逻辑处理函数
// 修正this的指向问题
fn.apply(this)
timer = timeNow
}
}
}
// 使用节流函数
addBtn.addEventListener('click',debounce(clickFirst,2000))
为什么要修正this的指向问题
- 当函数被防抖或节流时,该函数会被多次调用,每次调用时的 this 关键字的值都可能不同。如果直接使用 this 关键字,可能会导致函数的行为不一致,因此需要对其进行修正。