作用
防抖（Debounce）是一种常用的性能优化技术，主要用于限制高频触发事件的执行频率。其核心思想是：在事件被触发后，延迟一段时间再执行回调函数。如果在延迟时间内事件再次被触发，则重新计时。防抖的典型应用场景包括：
o 输入框搜索建议：避免用户每输入一个字符就发起请求，而是在用户停止输入后延迟执行。
o 窗口大小调整：避免频繁触发resize事件导致的性能问题。
o 按钮防重复点击：防止用户快速多次点击按钮导致重复提交。
SeraJS防抖函数的实现
以下是SeraJS中防抖函数的实现逻辑（假设类似Lodash的_.debounce）：
【javascript】
function debounce(func, delay = 300) {
let timerId;
return function(...args) {
// 清除之前的定时器，重新计时
clearTimeout(timerId);
timerId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
使用范例
【javascript】
// 模拟一个高频触发的事件（如输入框输入）
const searchInput = document.getElementById('search-input');
// 原始函数：模拟搜索请求
function fetchSuggestions(query) {
console.log(`Fetching suggestions for: ${query}`);
// 实际开发中这里可能是API请求
}
// 使用防抖函数包装原始函数
const debouncedFetch = debounce(fetchSuggestions, 500);
// 绑定输入事件
searchInput.addEventListener('input', (e) => {
debouncedFetch(e.target.value);
});
特点
1. 延迟执行：只有在事件停止触发后延迟时间结束，才会执行回调。
2. 避免高频调用：减少不必要的计算或请求，提升性能。
3. 保留最新上下文：通过apply确保回调函数的this指向正确。
注意事项
o 延迟时间：根据实际场景调整delay，过长可能导致响应延迟，过短则无法有效防抖。
o 立即执行选项：某些防抖实现支持立即执行（如Lodash的leading选项），可根据需求扩展。
o 取消功能：可通过返回的函数暴露cancel方法，手动取消未执行的防抖。
扩展：支持立即执行的防抖
【javascript】
function debounce(func, delay = 300, immediate = false) {
let timerId;
return function(...args) {
const context = this;
const later = () => {
timerId = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timerId;
clearTimeout(timerId);
timerId = setTimeout(later, delay);
if (callNow) func.apply(context, args);
};
}
总结
防抖函数通过延迟执行和重置计时，有效优化高频事件的处理。在需要减少不必要的计算或请求时，防抖是一种简单而强大的工具。