resize事件更适合用节流，因其需在调整过程中持续响应中间状态（如实时更新图表尺寸、导航栏临界点切换），节流可每100ms稳定执行一帧，兼顾响应性与性能；防抖仅最后执行一次，会丢失关键中间变化。
窗口缩放（resize）是典型的高频触发事件——拖拽浏览器边框时，每秒可能触发数十次。不加控制直接响应，容易引发重排重绘、图表重绘卡顿、甚至内存泄漏。防抖和节流都能降频，但选哪个、怎么写，得看实际需求。
resize 为什么更适合用节流
缩放过程需要中间态响应：比如图表要随窗口变宽实时拉伸、导航栏在宽度临界点切换折叠状态。防抖只在停止拖拽后执行一次，会错过这些中间变化；节流则能稳定输出，例如每 100ms 执行一帧，既不卡顿也不过载。
- 防抖适用场景：缩放结束后一次性重新计算布局（如重设 canvas 尺寸、刷新响应式栅格）
- 节流适用场景：需持续感知尺寸变化的交互逻辑（如实时调整 SVG viewBox、监听 breakpoint 切换）
- 多数项目中，节流是 resize 的默认更优解
节流函数的轻量实现
不需要依赖 Lodash，手写一个可靠节流即可：
function throttle(fn, delay) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last >= delay) {
fn.apply(this, args);
last = now;
}
};
}
使用方式：window.addEventListener('resize', throttle(handleResize, 100));
立即学习“Java免费学习笔记（深入）”；
防抖函数的典型写法与适用时机
如果确定只需“缩放结束才响应”，比如更新页面标题中的当前宽度、或触发一次服务端埋点，防抖更干净：
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
注意：delay 建议设为 150–250ms，太短易误判未结束，太长有延迟感。
实际项目中的组合建议
复杂场景可混合使用：
- 用节流处理 UI 层实时反馈（如 flex 容器适配、图表容器 resize）
- 用防抖处理副作用操作（如发送埋点、保存用户偏好宽度、触发热更新）
- 避免对同一 resize 事件同时绑定多个节流/防抖包装，防止嵌套计时混乱
- 记得在组件卸载或页面离开前移除监听，防止内存泄漏
