Angular JS 1.5 - 定期刷新计数：非$interval/$timeout实现方案问询

当然有替代方案啦！在Angular 1.5中，我们可以结合原生JavaScript API和Angular的变更检测机制来实现定期刷新计数，完全不用依赖$interval或$timeout。下面给你分享几个实用的实现方式：

Angular的变更检测不会自动监听原生定时器的回调，所以我们需要手动调用$apply()来通知Angular更新视图。这种方式逻辑简单，和$interval的效果一致，但完全基于原生API：

angular.module('myApp').controller('CountController', function($scope) {
  $scope.count = 0;
  let intervalId;

  // 更新计数的方法
  function updateCount() {
    $scope.count++;
    // 手动触发Angular的变更检测
    $scope.$apply();
  }

  // 启动原生定时器，每秒更新一次
  intervalId = setInterval(updateCount, 1000);

  // 重要：控制器销毁时清除定时器，避免内存泄漏
  $scope.$on('$destroy', function() {
    clearInterval(intervalId);
  });
});

如果担心$apply()在Angular消化周期内触发报错，可以加个简单的判断避免冲突：

function updateCount() {
  // 检查当前是否处于消化周期中
  if (!$scope.$$phase) {
    $scope.$apply(function() {
      $scope.count++;
    });
  } else {
    $scope.count++;
  }
}

如果你的计数刷新需要更平滑的视觉效果，或者希望在页面隐藏时自动暂停以节省资源，可以用浏览器原生的requestAnimationFrameAPI。它专门为动画场景设计，比setInterval更高效，还能自动适配浏览器的刷新频率：

angular.module('myApp').controller('CountController', function($scope) {
  $scope.count = 0;
  let requestId;

  function updateCount() {
    $scope.count++;
    $scope.$apply();
    // 循环调用，实现持续更新
    requestId = requestAnimationFrame(updateCount);
  }

  // 启动更新循环
  requestId = requestAnimationFrame(updateCount);

  // 控制器销毁时取消动画帧请求
  $scope.$on('$destroy', function() {
    cancelAnimationFrame(requestId);
  });
});

如果你的计数需要和服务器保持同步，完全不用主动轮询——可以用WebSocket或Server-Sent Events（SSE）接收服务器的推送更新。这种方式不仅避开了定时器，还能让计数实时同步，效率更高：

angular.module('myApp').controller('CountController', function($scope) {
  $scope.count = 0;
  // 建立WebSocket连接
  const ws = new WebSocket('ws://your-server-endpoint');

  // 接收服务器推送的计数更新
  ws.onmessage = function(event) {
    const newCount = parseInt(event.data);
    $scope.$apply(function() {
      $scope.count = newCount;
    });
  };

  // 控制器销毁时关闭WebSocket连接
  $scope.$on('$destroy', function() {
    ws.close();
  });
});

最后提醒 #

无论用哪种方案，一定要在控制器销毁时清理资源（清除定时器、关闭WebSocket等），否则会导致内存泄漏问题。

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