AngularJS 1.x如何创建计时器单例服务？控制器为何无法获取更新值？

你踩的这个坑其实是JavaScript里原始类型按值传递的经典问题，再加上异步更新的同步没处理好，咱们一步步拆解解决：

为什么控制器拿不到更新后的值？ #

• 首先，scope.timeDiff是数值类型（原始类型），当你把它传给customTimer.startTimer()时，传递的是值的副本——服务内部的timeDiff变量和控制器的scope.timeDiff是完全独立的两个变量，服务里修改这个副本根本不会影响到控制器的变量。
• 其次，$interval是异步执行的，你调用startTimer后立刻返回的timeDiff是初始值0，之后$interval里的更新完全和控制器的变量脱节了。

修正后的单例计时器服务 #

既然需求是多对象共享计时状态，咱们让服务自己维护全局的计时状态，再通过合理的方式同步给控制器，这里给你两种常用的实现方式：

方式一：服务维护状态 + 事件通知更新 #

适合多个控制器需要同步获取最新计时的场景：

angular.module('myModule').factory('customTimer', ['$interval','$rootScope', function ($interval,$rootScope) {
  var timerId;
  var timeDiff = 0; // 服务内部维护共享的计时状态
  const INTERVAL_STEP = 1000;

  // 内部更新逻辑，每次更新后广播事件通知控制器
  function updateTimer() {
    timeDiff += INTERVAL_STEP;
    $rootScope.$broadcast('customTimer:updated', timeDiff);
  }

  return {
    // 启动计时器（防止重复启动）
    startTimer: function () {
      if (!timerId) {
        timerId = $interval(updateTimer, INTERVAL_STEP);
      }
    },
    // 获取当前计时值
    getTimeDiff: function () {
      return timeDiff;
    },
    // 停止计时器
    stopTimer: function () {
      if (timerId) {
        $interval.cancel(timerId);
        timerId = null;
      }
    },
    // 重置计时
    resetTimer: function () {
      timeDiff = 0;
    }
  };
}]);

控制器中使用：

// 初始化获取当前计时值
$scope.timeDiff = customTimer.getTimeDiff();
// 启动全局计时器
customTimer.startTimer();

// 监听服务的更新事件，同步到scope
$scope.$on('customTimer:updated', function(event, newTime) {
  $scope.timeDiff = newTime;
});

// 注意：如果是全局共享计时器，不要在单个控制器销毁时停止！
// $scope.$on('$destroy', function() {
//   customTimer.stopTimer();
// });

方式二：返回引用类型对象，利用引用同步 #

这种方式更简洁，因为对象是按引用传递的，服务和控制器共享同一个对象的引用：

angular.module('myModule').factory('customTimer', ['$interval', function ($interval) {
  var timerId;
  const INTERVAL_STEP = 1000;
  // 用对象包裹计时值，借助引用类型实现自动同步
  var timerState = {
    timeDiff: 0
  };

  return {
    startTimer: function () {
      if (!timerId) {
        timerId = $interval(function() {
          timerState.timeDiff += INTERVAL_STEP;
        }, INTERVAL_STEP);
      }
    },
    // 返回引用对象，控制器拿到后会自动同步更新
    getTimerState: function () {
      return timerState;
    },
    stopTimer: function () {
      if (timerId) {
        $interval.cancel(timerId);
        timerId = null;
      }
    },
    resetTimer: function () {
      timerState.timeDiff = 0;
    }
  };
}]);

控制器中使用：

// 获取引用对象，之后服务更新时会自动同步到scope
$scope.timerState = customTimer.getTimerState();
// 启动计时器
customTimer.startTimer();

// 模板中直接使用 {{timerState.timeDiff}} 即可

额外注意事项 #

• 一定要判断timerId是否存在再启动，防止重复调用startTimer创建多个$interval实例，导致计时加速。
• 如果是全局共享的计时器，不要在单个控制器销毁时停止，否则其他使用该服务的控制器会丢失计时状态；如果需要每个控制器独立计时，那得调整服务逻辑支持创建独立实例。

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