JavaScript 中节流函数怎么在屏幕旋转监听中使用-js教程-PHP中文网

节流函数用于防止屏幕旋转时orientationchange或resize事件频繁触发，确保布局调整等逻辑按固定间隔执行；手写节流函数基于时间戳实现，推荐间隔150–300ms，并优先监听orientationchange，降级时用resize加宽高比判断方向。

javascript 中节流函数怎么在屏幕旋转监听中使用

节流函数在屏幕旋转监听中主要用于防止 window.orientation 变化或 resize 事件频繁触发导致的重复执行，尤其在移动端横竖屏切换时，浏览器可能连续触发多次事件。合理使用节流能保障逻辑只在稳定状态后执行一次，避免 UI 重绘、接口调用或布局计算浪费资源。

为什么屏幕旋转需要节流

现代浏览器中，orientationchange 事件虽比 resize 更精准，但部分安卓机型或 WebView 仍会伴随多次 resize 触发；而纯监听 resize 更容易因滚动、键盘弹出、缩放等干扰产生误判。节流不是为“防抖”，而是为“控频”——确保即使事件密集发生，核心逻辑（如调整布局、上报方向）也按固定间隔执行，兼顾响应性与性能。

实现一个轻量节流函数

不依赖 Lodash，手写一个基于时间戳的节流函数即可：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

关键点：

用 Date.now() 计算真实时间间隔，比定时器更可靠
不使用 setTimeout 队列，避免延迟累积或丢失最后一次调用
适用于 orientationchange 或 resize，只需传入处理函数和期望间隔（如 200ms）

绑定到 orientationchange 事件

优先使用 orientationchange，它专为屏幕方向设计，兼容性良好（iOS Safari、Android Chrome 均支持）：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

const handleOrientation = throttle(() => {
  const angle = window.orientation || 0;
  const isLandscape = Math.abs(angle) === 90;
  console.log('当前方向：', isLandscape ? '横屏' : '竖屏');
  // 执行布局适配、统计上报等逻辑
}, 200);
<p>window.addEventListener('orientationchange', handleOrientation);</p>

注意：

部分旧版 Android 可能不触发 orientationchange，可降级监听 resize 并结合 window.innerWidth / window.innerHeight 判断方向
节流间隔建议 150–300ms：太短起不到限制作用，太长会导致方向感知明显滞后

兼容 resize + 方向判断的备选方案

若需兼容不支持 orientationchange 的环境，可用 resize + 节流 + 宽高比判断：

const handleResize = throttle(() => {
  const { innerWidth: w, innerHeight: h } = window;
  const isLandscape = w > h;
  // 注意：仅靠宽高无法区分 90° 和 270° 横屏，但多数场景够用
  console.log('宽高比判定方向：', isLandscape ? '横屏' : '竖屏');
}, 200);
<p>window.addEventListener('resize', handleResize);</p>

补充说明：