AngularJS随机数生成器出现延迟，其成因是什么？

你的代码里定时更新出现卡顿、时长不准的问题，核心原因是递归调用$timeout的顺序错误，以及没有使用更适配重复定时场景的API。

问题分析 #

当前代码中，update函数先调用$timeout(update, delay)，然后立即更新$scope的值：

(function update() {
  $timeout(update, 1000 * 1);
  $scope.rngESUS = Math.round((Math.random() * 5) + 1);
}());

这种写法会导致：

• 第一次更新是立即执行的，而非等待设定的1秒延迟
• 后续$timeout的计时从update函数执行时就开始计算，而非更新完成后，一旦JS线程被其他任务阻塞，延迟会不断累加，最终导致更新节奏完全混乱

解决方案1：修正递归$timeout的写法 #

把更新$scope的逻辑放到$timeout的回调函数里，确保每次都是先等待指定延迟，再更新值，最后递归触发下一次更新：

var app = angular.module('myApp', []);

app.controller('MyRngCtrl', function($scope, $timeout) {
  $scope.rngESUS = 0;
  (function update() {
    $timeout(function() {
      $scope.rngESUS = Math.round((Math.random() * 5) + 1);
      update(); // 完成更新后再触发下一次定时
    }, 1000);
  }());
});

app.controller('MyRngCtrl2', function($scope, $timeout) {
  $scope.rngESUS2 = 0;
  (function update() {
    $timeout(function() {
      $scope.rngESUS2 = Math.round((Math.random() * 5) + 1);
      update();
    }, 2000);
  }());
});

解决方案2：使用$interval（更推荐） #

AngularJS提供的$interval服务专门用于处理重复执行的定时任务，它比递归$timeout更可靠，能更好地保证间隔精度：

var app = angular.module('myApp', []);

app.controller('MyRngCtrl', function($scope, $interval) {
  $scope.rngESUS = 0;
  // 每1秒执行一次更新
  $interval(function() {
    $scope.rngESUS = Math.round((Math.random() * 5) + 1);
  }, 1000);
});

app.controller('MyRngCtrl2', function($scope, $interval) {
  $scope.rngESUS2 = 0;
  // 每2秒执行一次更新
  $interval(function() {
    $scope.rngESUS2 = Math.round((Math.random() * 5) + 1);
  }, 2000);
});

额外提示：如果需要在控制器销毁时停止$interval，可以保存$interval返回的Promise，然后在$destroy事件中调用$interval.cancel(promise)，避免内存泄漏：

app.controller('MyRngCtrl', function($scope, $interval) {
  $scope.rngESUS = 0;
  var intervalPromise = $interval(function() {
    $scope.rngESUS = Math.round((Math.random() * 5) + 1);
  }, 1000);
  
  // 控制器销毁时停止定时
  $scope.$on('$destroy', function() {
    $interval.cancel(intervalPromise);
  });
});

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