节流函数用于防止屏幕旋转时orientationchange或resize事件高频触发，确保布局调整等逻辑按固定间隔执行；推荐基于时间戳手写节流函数，间隔200ms，优先监听resize并结合window.innerwidth>window.innerheight判断方向。
屏幕方向旋转时，orientationchange 事件可能高频触发（尤其在 iOS 模拟器或部分安卓设备上），直接在事件回调中执行 DOM 重排、样式计算或接口请求，容易造成卡顿或重复操作。节流（throttle）能确保回调函数在指定时间间隔内最多执行一次，适合用于布局适配这类“需响应但不必实时”的场景。
监听 orientationchange 并节流处理
原生 orientationchange 兼容性良好（iOS Safari、Android Browser 等均支持），但注意：现代 Chrome / Firefox 已不触发该事件（改用 resize + window.matchMedia 判断），所以建议优先检测 screen.orientation 或监听 resize，再结合节流。
以下是兼容主流环境的节流方案：
- 用
window.addEventListener('resize', ...)覆盖更多设备（包括桌面浏览器模拟旋转） - 通过
window.innerWidth > window.innerHeight或screen.orientation?.type判断横/竖屏 - 使用简单节流函数控制执行频率（如 200ms 内只执行一次）
手写轻量节流函数（无依赖）
无需引入 Lodash，几行代码即可实现可靠节流：
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
用法示例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const handleOrientation = () => {
const isLandscape = window.innerWidth > window.innerHeight;
document.body.className = isLandscape ? 'landscape' : 'portrait';
// 触发重绘、调整 canvas 尺寸、更新组件状态等
};
<p>const throttledHandle = throttle(handleOrientation, 200);</p><p>window.addEventListener('resize', throttledHandle);
// 可选：仍监听 orientationchange 做兜底（iOS 真机更及时）
window.addEventListener('orientationchange', throttledHandle);</p>
注意移动端 Safari 的 orientationchange 特性
iOS Safari 在旋转时会先触发 orientationchange，再触发 resize，且 screen.orientation.type 在某些版本中返回滞后或不可靠（如始终为 portrait-primary）。因此推荐以 resize 为主，辅以尺寸比判断：
- 避免依赖
window.orientation（已废弃，且在 iOS 17+ 返回undefined） - 用
window.innerWidth / window.innerHeight > 1.2判断横屏（加阈值防抖，避免 90° 旋转过程中的临界抖动） - 首次加载也应调用一次适配逻辑，防止初始方向未触发事件
补充：CSS 层面可减少 JS 介入
对纯样式适配（如隐藏按钮、切换 flex 方向），优先使用 CSS 媒体查询，降低 JS 负担：
@media (orientation: landscape) {
.header { display: none; }
.grid { flex-direction: row; }
}
@media (orientation: portrait) {
.sidebar { width: 100%; }
}
JS 节流更适合需要动态计算、DOM 操作或触发异步逻辑的场景（如重新渲染图表、加载横屏专用资源等）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
