实时数据流UI指示灯状态切换问题求助：已试$timeout/$interval未解决

我来帮你搞定这个问题！你遇到的核心是要为每个独立的curveName维护各自的超时逻辑，之前用$timeout和$interval没做好大概率是因为没对每条曲线做独立的定时器管理，或者没处理好定时器的重置逻辑。

核心思路是给每条曲线单独维护状态和定时器，确保它们的指示灯状态互不干扰：

1. 构建曲线状态池：用一个对象存储每个curveName的最后更新时间、当前指示灯状态，以及对应的超时定时器ID，让每条曲线的状态完全独立。
2. 数据接收时的即时处理：每次收到某条曲线的数据，立刻更新它的最后接收时间、把指示灯设为绿色，同时清除该曲线之前的超时定时器（避免旧定时器误触发），然后重新设置一个30秒后的超时任务，到时自动把指示灯改成红色。
3. UI动态绑定：用AngularJS的ng-class指令根据曲线的状态动态切换指示灯颜色。

控制器逻辑 #

angular.module('indicatorApp', [])
.controller('IndicatorController', function($scope, $timeout) {
  // 存储每条曲线的状态：{ lastUpdate: 时间戳, status: 'green'/'red', timeoutId: 定时器ID }
  $scope.curveStatusMap = {};

  // 处理传入数据的核心函数
  $scope.processIncomingData = function(curveName) {
    // 初始化曲线状态（如果是第一次收到该曲线的数据）
    if (!$scope.curveStatusMap[curveName]) {
      $scope.curveStatusMap[curveName] = {
        status: 'green',
        timeoutId: null
      };
    }

    const currentCurve = $scope.curveStatusMap[curveName];
    // 更新最后接收时间
    currentCurve.lastUpdate = Date.now();
    // 立刻切换为绿色指示灯
    currentCurve.status = 'green';

    // 清除之前的超时定时器（关键：避免旧定时器到点错误变红）
    if (currentCurve.timeoutId) {
      $timeout.cancel(currentCurve.timeoutId);
    }

    // 重新设置30秒后的超时任务
    currentCurve.timeoutId = $timeout(() => {
      // 额外校验：确保当前时间和最后更新时间差确实超过30秒（应对极端并发场景）
      if (Date.now() - currentCurve.lastUpdate > 30000) {
        currentCurve.status = 'red';
      }
    }, 30000);
  };
});

UI模板 #

<div ng-app="indicatorApp" ng-controller="IndicatorController">
  <!-- 动态渲染所有曲线的指示灯 -->
  <div ng-repeat="(curveName, status) in curveStatusMap" class="curve-item">
    <span class="indicator" ng-class="{ 'green-light': status.status === 'green', 'red-light': status.status === 'red' }"></span>
    <span>{{ curveName }}</span>
  </div>
</div>

样式定义 #

.curve-item {
  margin: 8px 0;
  display: flex;
  align-items: center;
}

.indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
}

.green-light {
  background-color: #27ae60;
  box-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
}

.red-light {
  background-color: #e74c3c;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}

• 定时器重置：每次收到新数据都要取消之前的定时器，因为新数据意味着超时时间要从当前重新计算30秒，否则旧定时器到点会错误地把绿灯变红。
• 独立状态管理：每条曲线的状态和定时器都存在专属的对象里，完全不会互相干扰，完美适配多曲线独立指示灯的需求。
• 额外时间校验：在超时回调里再做一次时间差校验，能避免极端场景下（比如数据并发快速传入）定时器还没来得及取消就触发的问题。

内容的提问来源于stack exchange，提问作者Abhirup