У меня есть то, что я считал довольно простым приложением AngularJS. Раньше у меня в коде контроллера был простой таймер обратного отсчета, но я решил разбить его на отдельный сервис. Вот тут и начались проблемы.
Раньше, когда мой код таймера был встроен в контроллер, переменная области видимости countdown
отображалась правильно - каждую секунду она отсчитывала на единицу меньше, до 0, в соответствии с функцией таймера. Однако теперь, когда я переместил это в службу и передавал данные туда и обратно с некоторыми вызовами функций, countdown
variable отсчитывает 2 числа каждую секунду, а не 1. Если я console.log(countdown);
в своей функции rundownClock()
службы, правильный номер обратного отсчета отображается каждый проход, однако: 10,9,8,7 ... до 1.
Может ли кто-нибудь понять, что я сейчас делаю не так, и почему происходит этот «двойной счет»? Я неправильно поддерживаю прицел в контроллере?
Вот некоторые из контроллеров с выделенными соответствующими битами CountdownService:
myApp.controller('myCtrl', ['$scope', 'CountdownService', function($scope, CountdownService) {
// TIMER SERVICES
$scope.startTimer = CountdownService.startTimer;
$scope.runClock = function () {
$scope.updateCountdown();
if (($scope.countdown > 0) && ($scope.roundStarted == true)) {
CountdownService.rundownClock($scope.countdown);
}
};
$interval($scope.runClock, 1000);
$scope.updateCountdown = function () {
CountdownService.setCurrentRound($scope.currentRound);
$scope.countdown = CountdownService.getCountdown();
$scope.roundStarted = CountdownService.getRoundStarted();
}
}]);
Вот некоторые из рассматриваемых услуг. (Не беспокойтесь о настройке переменной rounds в начале, это не имеет отношения к проблеме):
myApp
.factory("CountdownService", function (gameSetUp) {
var rounds = gameSetUp.rounds,
roundStarted = false,
roundFinished = false,
currentRound = 0,
countdown = rounds[currentRound].time;
// grab the round from the controller's scope to set the current round
function setCurrentRound(round) {
currentRound = round;
}
function getRoundStarted() {
return roundStarted;
}
function getCountdown() {
return countdown;
}
function startTimer() {
roundStarted = true;
}
function rundownClock() {
if (roundStarted === true) {
if (countdown > 0) {
countdown = countdown - 1;
}
if (countdown === 0) {
roundFinished = true;
}
}
}
return {
startTimer: startTimer,
rundownClock: rundownClock,
getCountdown: getCountdown,
getRoundStarted: getRoundStarted,
setCurrentRound: setCurrentRound
};
});
И, наконец, фрагмент из представления, в котором отображается переменная области обратного отсчета:
<div class="timer md-body-2">{{ countdown }} seconds</div>