📝 使用场景
- 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
- 调整浏览器窗口大小时,resize次数过于频繁,造成计算过多,此时需要一次到位,就需要用到防抖
- 搜索框搜索输入,不需要每次输入一个字的时候就进行搜索,而且等待没有再次输入的时候就返回结果,需要防抖
📐 实现原理
- 一定时间内,只有最后一次操作,再过waitTime毫秒后才执行函数
🚄 实现
说明
- 考虑到后面这个东西会常用,因此我这里通过封装成独立一个JS文件。
- 文件名称:
debounce.js
✨方法封装✨
function debounce(func, waitTime = 500, immediate = false) {
// 类型检查,确保 func 是一个函数
if (typeof func !== 'function') {
throw new TypeError('Expected a function');
}
let timeout = null; // 将 timeout 变量放在函数内部
return function(...args) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout);
// 立即执行逻辑
if (immediate) {
const callNow = timeout === null; // 只有在没有定时器时才执行
timeout = setTimeout(() => {
timeout = null; // 清理定时器
}, waitTime);
if (callNow) {
func.apply(this, args); // 立即执行函数
}
} else {
// 设置定时器,延迟执行函数
timeout = setTimeout(() => {
func.apply(this, args); // 等待 waitTime 毫秒后执行函数
}, waitTime);
}
};
}
export default debounce;
✨参数说明✨
参数 | 说明 | 类型 |
---|---|---|
func | 需要执行的回调函数 | Function |
waitTime | 延长执行函数的时间 | Number |
immediate | 是否立即执行 | Boolean |
更多方法详见,苏宛墨の小破站