仅当上一条件已执行时才触发对应GA事件：resize场景下宽度检测逻辑优化

现有代码的基础问题 #

• 事件绑定逻辑错位：原代码中window.outerWidth >= 800绑定移动端事件、window.outerWidth <= 801绑定非移动端事件，和需求约定的判定规则完全相反。结合需求给出的触发示例，正确的判定对应关系为：
  • 移动端「Mobile browser width」事件判定阈值：window.outerWidth <= 801
  • 非移动端「Non-mobile browser width」事件判定阈值：window.outerWidth >= 800
• 代码结构语法错误：外层if判断未闭合括号，内部嵌套的if逻辑会导致只要窗口宽度>=800就强行进入内层判断，不符合平行分支的预期。
• 缺少状态留存机制：没有记录上一次已经成功触发的事件类型，导致连续拖拽窗口时，每变化1像素宽度就重复调用gtag，造成事件刷屏。

核心实现思路 #

通过一个全局状态变量记录上一次成功发送的事件类型，每次resize触发时先判断当前窗口宽度命中的事件类型，仅当命中类型和上一次记录的类型不一致时，才调用gtag发送对应事件，发送完成后更新状态变量。
这个机制可以从根源上满足交叉触发要求：

• 连续在同一类宽度区间内调整窗口时，因为命中的事件类型和上一次记录的一致，直接跳过发送动作
• 当窗口宽度跨到另一类判定区间时，因为命中类型发生变化，才触发对应事件，实现两类事件交替触发的效果，不会出现同一类事件连续重复发送的问题
• 针对800-801像素的阈值重叠区间，代码中通过分支优先级控制逻辑，优先判定为移动端，避免同一帧同时命中两个分支导致双事件发送。

调整后的可运行代码 #

// 记录上一次已成功触发的事件类型，初始值为null代表尚未触发过任何事件
let lastTriggeredEventType = null;

$(window).resize(function() {
  // 计算当前窗口宽度对应的匹配事件类型
  let currentMatchedEvent = null;
  // 重叠区间做优先级判断：优先匹配移动端判定规则
  if (window.outerWidth <= 801) {
    currentMatchedEvent = 'Mobile browser width';
  } else if (window.outerWidth >= 800) {
    currentMatchedEvent = 'Non-mobile browser width';
  }

  // 仅当当前匹配事件和上一次触发的事件类型不一致时，才发送埋点
  if (currentMatchedEvent && currentMatchedEvent !== lastTriggeredEventType) {
    gtag('event', currentMatchedEvent, {
      'event_category': 'BrowserWidth'
    });
    // 发送完成后更新状态记录
    lastTriggeredEventType = currentMatchedEvent;
  }
});

规则匹配校验 #

对照需求给出的触发示例，上述代码的运行逻辑完全匹配要求：

1. 首次resize触发时，若窗口宽度<=801，匹配到移动端事件，因初始状态无触发记录，正常发送移动端事件，更新状态为移动端
2. 继续调整窗口，只要宽度仍然<=801，匹配到的事件类型和记录状态一致，直接跳过发送
3. 调整窗口宽度到>=800的范围，匹配到非移动端事件，和当前记录的移动端状态不一致，正常发送非移动端事件，更新状态为非移动端
4. 再次调整窗口回到<=801的范围，匹配到移动端事件，和记录的非移动端状态不一致，正常发送移动端事件，更新状态为移动端
5. 后续来回切换窗口宽度区间，将持续按照交替逻辑触发对应事件，不会出现高频重复发送的问题

内容的提问来源于stack exchange，提问作者Khyn E M C Santos