Question

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

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

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

我确信这是制作秒表的一种糟糕方式，但无论如何，这个问题仍然存在。

我的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会返回一个承诺，每次运行$scope.startTimer时，您都会创建一个新承诺。当您再次运行它时，它不会取消先前的承诺，只会将$scope.counter重新分配给新的承诺。

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

一个简单的解决方案是检查在您要创建新承诺时是否已经定义了您分配承诺的var。例如：

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

如果您愿意，也可以使用布尔值来保持状态是否已经启动。

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

1 个答案: