如何通过按钮停止AngularJS中定时生成随机数的update函数？

核心思路是利用$timeout返回的Promise对象来取消定时器，下面是完整的实现示例：

控制器代码 #

angular.module('randomApp', [])
  .controller('RandomController', ['$scope', '$timeout', function($scope, $timeout) {
    // 存储定时器Promise，用于后续取消
    let timeoutPromise;
    // 随机数范围配置
    $scope.minNum = 1;
    $scope.maxNum = 100;
    $scope.currentNum = Math.floor(Math.random() * ($scope.maxNum - $scope.minNum + 1)) + $scope.minNum;

    // 自调用的更新函数
    function update() {
      // 生成随机数
      $scope.currentNum = Math.floor(Math.random() * ($scope.maxNum - $scope.minNum + 1)) + $scope.minNum;
      // 15秒后再次调用update，同时保存Promise到变量
      timeoutPromise = $timeout(update, 15000);
    }

    // 初始化启动定时器
    update();

    // 停止定时器的函数
    $scope.stopUpdate = function() {
      // 检查定时器是否存在，避免重复取消报错
      if (timeoutPromise) {
        $timeout.cancel(timeoutPromise);
        timeoutPromise = null; // 清空引用
      }
    };

    // 可选：添加重启功能
    $scope.restartUpdate = function() {
      if (!timeoutPromise) {
        update();
      }
    };
  }]);

视图代码 #

<div ng-app="randomApp" ng-controller="RandomController">
  <p>当前随机数: {{ currentNum }}</p>
  <button ng-click="stopUpdate()">停止生成</button>
  <button ng-click="restartUpdate()">重新启动</button>
</div>

关键说明 #

• 保存定时器引用：每次调用$timeout(update, 15000)都会返回一个Promise对象，我们把它存在timeoutPromise变量里，这是实现停止功能的核心。
• 取消定时器：调用$timeout.cancel(timeoutPromise)可以终止尚未执行的定时器，这样update函数就不会被再次调用，也就停止了随机数的生成。
• 边界处理：在停止函数里先判断timeoutPromise是否存在，避免重复取消导致的不必要报错；重启时也要检查定时器是否已停止，防止重复启动多个定时器。

内容的提问来源于stack exchange，提问作者Marie-Elise fresman