orientationchange事件需防抖以避免设备旋转抖动导致频繁触发，只在方向稳定后执行一次逻辑；核心原因是传感器微抖引发多次触发，不防抖会造成dom重排、无效请求等性能浪费。
防抖处理 orientationchange 事件，核心目标是避免设备轻微晃动或旋转过程中频繁触发回调，只在用户真正“停稳”方向后执行一次逻辑。由于该事件在移动端（含模拟器）才有效，且触发频率可能较高（尤其在手持设备缓慢转动时），直接响应会导致冗余计算、样式重绘或接口调用浪费。
为什么 orientationchange 需要防抖
设备物理旋转时，传感器数据存在微小抖动，浏览器可能连续触发多次 orientationchange（比如从竖屏 → 倾斜 → 横屏 → 微调 → 横屏），而你真正关心的只是最终稳定后的朝向。不加防抖可能导致：
- 重复执行 DOM 重排或媒体查询切换逻辑
- 多次调用
matchMedia或重新计算布局尺寸 - 在配合 Ajax 加载适配资源时，发出无效请求
- 动画或 Canvas 渲染被意外中断或重叠
基础防抖实现（兼容原生与 jQuery）
使用标准防抖函数包裹处理逻辑，延迟执行并自动清除前序定时器：
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// 处理旋转的实际逻辑
function handleOrientationChange() {
const angle = window.orientation || (window.innerWidth > window.innerHeight ? 90 : 0);
console.log('方向已稳定：', angle, '度');
// ✅ 此处放你的适配代码：如调整容器宽高、切换 class、重绘 canvas 等
}
// 绑定防抖后的回调
window.addEventListener('orientationchange', debounce(handleOrientationChange, 300));
注意：window.orientation 已废弃，更推荐用 screen.orientation.angle（需检查支持）或通过 window.innerWidth / window.innerHeight 比值判断横竖屏。
增强版：带立即执行 + 取消能力（适合复杂场景）
若希望首次旋转立刻响应（如快速横屏需立即显示横屏 UI），后续再防抖，可用带 leading 选项的版本：
function debounceLeading(func, wait, immediate = false) {
let timeout;
return function(...args) {
const callNow = immediate && !timeout;
clearTimeout(timeout);
if (callNow) {
func.apply(this, args);
}
timeout = setTimeout(() => {
if (!immediate) func.apply(this, args);
timeout = null;
}, wait);
};
}
const debouncedHandler = debounceLeading(() => {
document.body.classList.toggle('landscape', window.innerWidth > window.innerHeight);
}, 250, true);
window.addEventListener('orientationchange', debouncedHandler);
实际注意事项
防抖不能替代方向检测逻辑本身，还需配合以下实践：
-
初始状态补全：页面加载时主动执行一次方向判断，避免白屏或错位（
handleOrientationChange()在绑定后手动调用一次） -
降级兼容：Safari/iOS 对
orientationchange支持较好，但部分 Android WebView 可能不稳定，可监听resize作为后备（配合节流） - 避免内存泄漏：若页面卸载，记得移除事件监听器（尤其在 SPA 中）
-
不依赖 alert 或同步阻塞操作：防抖中禁止使用
alert()，它会打断事件循环，影响防抖计时准确性
