resize需防抖因每秒触发几十次，频繁执行布局/dom操作会导致卡顿，用户只关心最终尺寸；用cleartimeout+settimeout实现150ms延迟，配合innerwidth/innerheight读取真实尺寸并切换class，注意初始化执行和卸载时移除监听。
直接用 window.addEventListener('resize', handler) 监听窗口缩放，不加控制容易卡顿。防抖的核心是“等用户停手后再执行”，特别适合 resize 这类连续高频触发的场景。
为什么 resize 需要防抖
拖拽浏览器边框时，resize 事件每秒可能触发几十次。如果每次都在回调里重算布局、操作 DOM 或请求数据，主线程会持续忙碌，导致页面掉帧、卡顿甚至假死。而用户真正关心的，只是最终稳定下来的尺寸——防抖正是为此服务。
简易防抖实现（无依赖）
不用引入 Lodash，几行代码就能搞定：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 声明一个变量保存定时器 ID，比如
let resizeTimer - 在 resize 回调中：先
clearTimeout(resizeTimer)，再resizeTimer = setTimeout(() => { /* 布局逻辑 */ }, 150) - 延迟时间选 100–200ms 较合理：太短起不到效果，太长会让响应显得迟钝
配合视口尺寸做实际调整
防抖只是节奏控制器，真正干活还得靠 window.innerWidth 和 window.innerHeight：
- 在防抖触发的最终回调里读取这两个值，它们反映的是当前真实可视区域大小
- 根据宽高比或具体阈值切换 CSS 类名，比如
document.body.classList.toggle('mobile-layout', innerWidth - 避免在回调里反复修改 style 或频繁 querySelector，优先用 class 控制样式
别忘了初始化和清理
防抖逻辑上线后，还有两个细节常被忽略：
- 页面加载完成时立即执行一次布局逻辑，确保首屏渲染正确（防抖不会覆盖初始状态）
- 组件卸载或页面离开前，记得
window.removeEventListener('resize', handler)，防止内存泄漏
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
