防抖与节流
防抖概念: 在一定的时间间隔N秒后才执行该事件, 若在N秒内被重复触发,则重新计时
- 应用场景
- 输入框连续输入值后,直等到最后一次输入完成才触发的查询动作
- 点赞, 表单提交等动作, 防止重复提交
function deBounce(fn, delay = 200) {
let timeout = null
return (...args) => {
// 是否有定时器
if (timeout) {
clearTimeout(timeout)
timeout = null
} else {
// 对第一次输入立即执行
fn.apply(this, args)
}
timeout = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
节流概念: N秒内只运行一次,若在N秒内重复触发,只有第一次生效
- 应用场景
- 滚动加载: 监听页面滚动到底部的时候触发
- 拖拽场景: 固定时间只执行一次,防止高频率的位置变动
节流函数封装
// 实现思路
// 1.借助setTimeout定时器,控制后续的事件是否执行
// 2.获取每次事件执行的事件与上一次执行的时间差
// 3.判断时间差是否已经超过设定的事件间隔
// 4.如果时间间隔已经超过, 则会立即执行函数
// 5. 如果没有超过, 则会取消后续的定时器任务
// 6. 最后一次事件的触发,会执行完成
function throttle(fn, time) {
// 上一次执行的时间
let pre = 0
// 定时器
let timeout = null
return function (...args) {
const now = Date.now()
// 如果时间超出了时间间隔
if (now - pre > time) {
pre = now
fn.apply(this, args)
} else {
// 如果在时间间隔内, 则后续的事件会直接清楚
if (timeout) {
clearTimeout(timeout)
timeout = null
}
// 最后一次的事件会触发
timeout = setTimeout(() => {
pre = Date.now()
fn.apply(this, args)
}, time)
}
}
}
总结
防抖:在一定的时间间隔N秒后才执行该事件, 若在N秒内被重复触发,则重新计时
节流:N秒内只运行一次,若在N秒内重复触发,只有第一次生效