什么的防抖和节流?
防抖和节流是两种应对web页面中频繁触发事件的优化方案,可以在JavaScript库Lodash中的_.debounce()以及_.throttle方法实现
背景:当事件触发非常频繁时,每一次的触发,回调函数都要去执行(如果时间很短,且回调函数内部有计算,那么很可能出现浏览器卡顿),从而浪费性能。
防抖 debounce
防抖就是防止抖动,避免事件的重复触发。可以概括为触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
应用场景:
- 点击按钮事件,用户在一定时间段内的点击事件,为了防止和服务端的多次交互,我们可以采用防抖。
- 富⽂本编辑器邮件等编辑内容实时保存
- 浏览器的窗口大小
resize
事件
代码实现:
//创建一个防抖函数debounce
function debounce(fn, delay) {
// 定义一个定时器, 保存上一次的定时器
let timer = null
// 真正执行的函数
const _debounce = function () {
// 取消上一次的定时器
if (timer) clearTimeout(timer)
// 延迟执行
timer = setTimeout(() => {
// 外部传入的真正要执行的函数
fn()
}, delay)
}
return _debounce
}
节流 throttle
节流就是在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调。即控制事件触发的频率。
应用场景:
- 滚动加载,加载更多或滚到底部监听
- 搜索框,搜索联想功能
代码实现:
function throttle(fn, interval) {
// 记录上一次的开始时间
let lastTime = 0
// 事件触发时, 真正执行的函数
const _throttle = function () {
// 获取当前事件触发时的时间
const nowTime = new Date().getTime()
// 计算出还剩余多长时间需要去触发函数
const remainTime = interval - (nowTime - lastTime)
if (remainTime <= 0) {
// 真正触发函数
fn()
// 保留上次触发的时间
lastTime = nowTime
}
}
return _throttle
}