Остановка углового. $ Timeout

Question

Я попытался остановить угловой. $ Timeout. Однако он не работает должным образом.

заказ this codepen для кода

Если нажать на старт, я ожидаю, что таймер остановится на 0. Тем не менее, он продолжает идти к отрицательному. Однако, если вы нажмете кнопку «Стоп», она остановится. Может ли кто-нибудь просветить меня на том, что я сделал не так?

Пример кода ниже:

$scope.countdown = function() { 
    stopped = $timeout(function() { 
     if($scope.counter == 0) { 
     $scope.stop(); 
     } 
     console.log($scope.counter); 
    $scope.counter--; 
    $scope.countdown(); 
    }, 1000); 
    }; 


$scope.stop = function(){ 
    $timeout.cancel(stopped); 

    } 

Спасибо большое!

Answer 1

Когда счетчик достигает 0, вы начинаете по телефону $scope.stop() в if блоке. Затем остальная функция выполняет и уменьшает счетчик, снова вызывает countdown(), воссоздавая новый тайм-аут.

Поместите оставшуюся часть функции в блок else, и у вас будет поведение, которое вы хотите.

Answer 2

Просто добавьте возврат после $scope.stop(), чтобы выйти из функции, поэтому таймер не запустится снова.

$scope.countdown = function() { 
    stopped = $timeout(function() { 
     console.log($scope.counter); 
     if($scope.counter == 0) { 
     $scope.stop(); 
     return; // <-- break out of the function 
     } 
     console.log($scope.counter); 
    $scope.counter--; 
    $scope.countdown(); 
    }, 1000); 
    };