角度计时器 - .stop() 和 .resume() 问题答案

【问题标题】：angular timer - .stop() and .resume() problems角度计时器 - .stop() 和 .resume() 问题
【发布时间】：2016-08-25 10:13:14
【问题描述】：

我的计时器有点问题。我可能使它变得比应有的更复杂，因为我需要的是以下内容：

我需要从 00:00 数到 45:00，并且我需要能够在这些边界内停止和恢复计时器。

现在我有这个计时器代码：

<timer id="timer" autostart="false" start-time="coutingStart" end-time="countingEnd">{{mminutes}}:{{sseconds}}</timer>

countingStart 和 countingEnd 初始化如下：

var time = (45 * 60000); // should give me 45 minutes of time.
$scope.countingStart = (new Date()).getTime();
$scope.countingEnd = (new Date()).getTime() + time;

上面的代码有效，至少我认为有效。我有一个带有此功能的按钮：

$scope.startGame = function() {
    $scope.gameIsLive = true;
    document.getElementById('timer').start();
};

它启动我的计数器，没问题，它至少从 00:00 开始。但是我也有具有这些功能的按钮，这就是我遇到问题的地方。

$scope.PauseGame = function() {
    switch ($scope.periodNum) {
        case 1:
            document.getElementById('timer').stop();
            $scope.PauseIsActive = true;
            break;
        case 2:
            document.getElementById('timer').stop();
            $scope.PauseIsActive = true;
            break;
    }
};

$scope.ResumeGame = function() {
    switch ($scope.periodNum) {
        case 1:
            document.getElementById('timer').resume();
            $scope.PauseIsActive = false;
            break;
        case 2:
            document.getElementById('timer').resume();
            $scope.PauseIsActive = false;
            break;
    }
};

pauseGame() 和 resumeGame() 都按预期工作。他们正在暂停和恢复计时器。但是，当我暂停计时器说 00:10 并为自己计数 10 秒然后恢复它时，计时器现在停留在 00:20 这让我刚刚失去了 10 秒的计时器。

我可以认为我的问题在于 $scope.counterStart 和 $scope.counterEnd 的实例化。但我不确定。如何从 00:00 数到 45:00 并且仍然能够在需要时停止和恢复时钟？

Angular 计时器使用 Date 对象和毫秒来计算时间，所以我想我必须使用这种方法来获取现在的 00:00 并向前计数 45 分钟。是否可以通过停止和恢复功能以其他方式完成？

谢谢。

【问题讨论】：

github.com/siddii/angular-timer 是我现在使用的指令。

标签： javascript angularjs datetime timer

【解决方案1】：

如果我理解 angular-timer docs 结束时间设置倒计时时间。它不提供最大值。

end-time 根据预定义的结束时间设置倒计时（在毫秒）。

要获得最大值，您可以检查每个滴答事件以查看是否已达到配置的最大值。我在下面创建了一个示例，其中计时器在达到最大值（10 秒）时停止。

(function() {
  angular
    .module('exampleApp', ['timer'])
    .controller('ExampleController', ExampleController);

  function ExampleController($scope, TimerStatusEnum, $timeout) {
    var vm = this;
    vm.max = 10000; // 10 seconds
    vm.isMaxReached = false;
    vm.timerStatus = TimerStatusEnum.NotStarted;

    vm.startTimer = function() {
      if (!vm.isMaxReached) {
        if (vm.timerStatus === TimerStatusEnum.NotStarted) {
          $scope.$broadcast('timer-start');
          vm.timerStatus = TimerStatusEnum.Running
        } else if (vm.timerStatus === TimerStatusEnum.Stopped) {
          $scope.$broadcast('timer-resume');
          vm.timerStatus = TimerStatusEnum.Running
        }
      }
    };

    vm.stopTimer = function() {
      if (vm.timerStatus === TimerStatusEnum.Running) {
        $scope.$broadcast('timer-stop');
        vm.timerStatus = TimerStatusEnum.Stopped
      }
    };

    vm.isTimerStopped = function() {
      return vm.timerStatus === TimerStatusEnum.Stopped;
    }

    vm.isTimerRunning = function() {

      return vm.timerStatus === TimerStatusEnum.Running;
    }

    $scope.$on('timer-tick', function(event, args) {
      var roundedMiliSecondCount = Math.round(args.millis / 1000) * 1000;
      if (roundedMiliSecondCount === vm.max) {
        $timeout(function() {
          vm.isMaxReached = true;
          vm.stopTimer();
        }, 0);
      }
    });

  }
  ExampleController.$inject = ['$scope', 'TimerStatusEnum', '$timeout'];
})();

(function() {
  angular
    .module('exampleApp')
    .constant('TimerStatusEnum', {
      'NotStarted': 0,
      'Stopped': 1,
      'Running': 2
    });

})();

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-timer/1.3.4/angular-timer.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/humanize-duration/3.9.1/humanize-duration.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <timer id="timer" autostart="false" interval="1000">{{mminutes}}:{{sseconds}}</timer>
  <button ng-click="vm.startTimer()" ng-disabled="vm.isTimerRunning() || vm.isMaxReached">Start Timer</button>
  <button ng-click="vm.stopTimer()" ng-disabled="vm.isTimerStopped() || vm.isMaxReached">Stop Timer</button>
  <p ng-if="vm.isMaxReached">Max time has been reached</p>
</body>

</html>

【讨论】：