AngularJS - 启动两次后无法取消 $interval

Question

我是编程新手，最近一直在研究 AngularJS。

为了练习，我决定尝试制作一个简单的秒表。

从初始“时间”值 0 开始，我使用 $interval 将“时间”每 10 毫秒递增 0.01。我可以毫无问题地启动和停止秒表，除非我点击“开始”两次。这样做之后，“停止”不再有效。

我确信这是创建秒表的糟糕方法，但无论如何，问题仍然存在。

我的 html 包含计时器以及“开始”和“停止”按钮，如下所示:

<div class="row" style="margin-left: 20px" ng-controller="timerCtrl">      
  <b>{{time | number : 2}}</b>
  <button ng-click="startTimer()">Start</button>
  <button ng-click="stopTimer()">Stop</button>
</div>

和 js:

.controller('timerCtrl', ['$scope', '$timeout', '$interval',
  function($scope, $timeout, $interval) {

  $scope.time = 0;       

  $scope.startTimer = function() {
    $scope.counter = $interval(function(){
    $scope.time += 0.01;
    }, 10)  
  }

  $scope.stopTimer = function() {
    $interval.cancel($scope.counter);
  }
 }
])

解决这个问题的最佳方法是什么？非常感谢任何帮助，谢谢!

Answer 1

问题是 $interval 返回了一个 promise ，每次运行 $scope.startTimer 都会创建一个新的 promise 。当您第二次运行它时，它不会取消之前的 promise ，它只是将 $scope.counter 重新分配给新的 promise 。

查看 AngularJS $interval页面查看他们的示例和避免此问题的方法。

一个简单的解决方案是在您要创建新 promise 时检查您要分配 promise 的变量是否已经定义。例如:

if ( angular.isDefined($scope.counter) ) return;

如果您愿意，您还可以使用 bool 变量来维护它是否已启动的状态。