防抖函数处理resize事件的核心是避免高频触发导致性能问题，只在用户停止调整后执行一次回调；其通过延迟执行确保响应最终稳定尺寸，推荐延迟200ms，并需注意this绑定与卸载清理。
防抖函数处理窗口大小调整（resize）事件的核心是：**避免高频触发导致的性能问题，只在用户停止调整后执行一次回调**。浏览器在拖拽窗口边框时会连续触发数十次 resize，直接绑定处理逻辑会造成卡顿或重复计算，防抖能有效收敛为一次执行。
为什么 resize 事件特别需要防抖
不同于点击或输入，resize 在用户拖动窗口过程中几乎每毫秒都可能触发，尤其在高刷新率屏幕或 macOS 上更频繁。若回调中涉及 DOM 重排（如重新计算布局、更新图表尺寸）、发起请求或复杂计算，极易引发主线程阻塞。防抖通过延迟执行，确保只响应“最终稳定尺寸”。
基础防抖函数实现（带取消能力）
一个健壮的防抖函数应支持手动清除定时器，防止旧任务在新任务之后错误执行：
function debounce(func, wait) {
let timeout;
return function executedFunction() {
const later = () => {
clearTimeout(timeout);
func.apply(this, arguments);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
使用示例：
const handleResize = debounce(() => {
console.log('窗口尺寸已稳定：', window.innerWidth, window.innerHeight);
// 更新图表、重排网格、调整字体等
}, 200);
window.addEventListener('resize', handleResize);
实际应用中的关键细节
- 延迟时间建议设为 100–250ms：太短（如 50ms）仍可能在快速拖拽中多次触发；太长（如 500ms）会让用户感觉响应滞后。200ms 是较平衡的选择。
- 首次触发不立即执行：标准防抖是“空闲后执行”，适合 resize 场景。若需“立即执行+后续防抖”，应改用节流（throttle）或定制化逻辑。
-
注意 this 和参数传递：箭头函数会丢失
this，推荐用普通函数并显式绑定，或用func.call(this, ...arguments)保证上下文正确。 - 页面卸载前清理监听器：避免内存泄漏，尤其在单页应用中：
const handleResize = debounce(updateLayout, 200);
window.addEventListener('resize', handleResize);
// 卸载时移除（例如组件销毁时）
window.removeEventListener('resize', handleResize);
现代替代方案：ResizeObserver（推荐用于布局响应）
对于仅需响应元素尺寸变化（如容器宽高），ResizeObserver 比 window.resize 更精准、高效且天然防抖：
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('目标元素尺寸变化：', entry.contentRect);
// 执行对应更新
}
});
observer.observe(document.querySelector('.panel'));
它不依赖窗口事件，不触发重排，且浏览器自动优化调用时机，适合组件级响应式逻辑。但无法替代全局窗口尺寸监听（如判断断点切换）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
