防抖可优化resize事件性能：只在连续触发停止后延迟执行一次回调。实现为返回新函数，每次调用清除旧定时器并设新延时；需预先创建再绑定，及时清理监听器，延迟建议200–300ms。
窗口大小改变（resize）事件会高频触发，直接在其中执行布局计算（如调整元素尺寸、重排网格、更新图表宽高）会导致严重性能问题。防抖（Debounce）是常用优化手段：它确保回调函数**只在连续触发停止后延迟执行一次**，从而大幅减少实际调用次数。
防抖函数的基本实现
一个轻量、可复用的防抖函数如下：
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
它接收目标函数和延迟毫秒数，返回一个“防抖后”的新函数。每次调用时，先清除上一次定时器，再设置新的延时执行 —— 保证只有最后一次“静默”后的调用生效。
绑定到 resize 事件的正确方式
不要在 addEventListener 中直接内联定义防抖函数，否则每次绑定都新建闭包，且无法清除旧定时器：
- ✅ 正确：创建一次防抖函数，再传给
addEventListener - ❌ 错误：
window.addEventListener('resize', debounce(handleResize, 200))（重复创建，且无法统一清理）
示例：
const handleResize = () => {
// 执行布局重算，例如：
document.body.style.fontSize = window.innerWidth / 40 + 'px';
chart.resize(); // ECharts 或其他图表库
};
const debouncedResize = debounce(handleResize, 200);
window.addEventListener('resize', debouncedResize);
注意内存与生命周期管理
页面卸载或组件销毁时，应移除事件监听器，避免内存泄漏和意外执行：
// 清理逻辑（例如在 React useEffect cleanup 或原生 onbeforeunload 中）
window.removeEventListener('resize', debouncedResize);
如果使用现代框架（如 React），推荐将防抖逻辑封装进自定义 Hook（如 useDebounceCallback），并配合 useEffect 自动管理依赖与清理。
延迟时间的选择建议
200–300ms 是常见平衡点：
- 太短（如 50ms）：仍可能频繁触发，失去防抖意义
- 太长（如 1s）：用户拖拽窗口后响应明显滞后，体验变差
- 对视觉反馈要求高的场景（如实时预览），可降至 100ms；纯布局适配可放宽至 250ms
不复杂但容易忽略。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
