angular js timer function not working on stop button

Question

I am learning angular js now for that purpose i have written sample test application with angular Js using timer function init ... when ever i run the app in browser i am able to start the counter and when i click on the stop button, I am not able to stop the timer Below is my code for timer function ..

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Angularjs</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('NameCtrl', ['$scope','$interval', function ($scope,$interval) {

    var i = 0;
    var timer; 
    $scope.message = "Div is Refreshed at " +  i  + "seconds";
        $scope.starttimer = function(){

            timer= $interval(function(){

                        $scope.message = "Div is Refreshed at " +  i  + "seconds";
                        i++;
            },1000)
            }
$scope.stoptimer = function(){

    if(angular.isUndefined(timer)){
        $interval.cancel(timer);
        timer = 'undefined';
        $scope.message = "Timer is killed";
    }
}
}])
</script>
</head>

<body>
    <div ng-controller="NameCtrl">
        <input type="button" id="btnStart" ng-click="starttimer()" value="Start" />
        <input type="button" id="btnStop" ng-click="stoptimer()" value="Stop"/>
        {{message}}
    </div>
</body>

Could any one please point me in right direction and the point where I am doing wrong in the above code to stop the timer..

Would any one please help on this ..

I think I spot a mistake in your if statement in the stoptimer function : shoud it not be `if(!angular.isUndefined(timer))` (note the added `!`) ? — Pierre Henry, Jul 27 '16 at 12:36
yeah many thanks for spot error please post it as answer i will accept ...... — Glory Raj, Jul 27 '16 at 12:38

score 1 · Accepted Answer · answered Jul 27 '16 at 12:39

1

The condition in your if statement in the stoptimer function is missing a negation :

if(angular.isUndefined(timer)){

should be

if(!angular.isUndefined(timer)){

answered Jul 27 '16 at 12:39

Pierre Henry

16,658
22
85
105

score 1 · Answer 2 · answered Jul 27 '16 at 12:40

Try this,

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Angularjs</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('NameCtrl', ['$scope','$interval', function ($scope,$interval) {

    var i = 0;
    var timer; 
    $scope.message = "Div is Refreshed at " +  i  + "seconds";
        $scope.starttimer = function(){

            timer= $interval(function(){

                        $scope.message = "Div is Refreshed at " +  i  + "seconds";
                        i++;
            },1000)
            }
$scope.stoptimer = function(){

    if(!angular.isUndefined(timer)){
      console.log('stop');
        $interval.cancel(timer);
        timer = 'undefined';
        $scope.message = "Timer is killed";
      }
    
}


}])
</script>
</head>

<body>
    <div ng-controller="NameCtrl">
        <input type="button" id="btnStart" ng-click="starttimer()" value="Start" />
        <input type="button" id="btnStop" ng-click="stoptimer()" value="Stop"/>
        {{message}}
    </div>
</body>

use if(!angular.isUndefined(timer)) instead of if(angular.isUndefined(timer))

score 1 · Answer 3 · answered Jul 27 '16 at 12:43

I edited your code now it is working.

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Angularjs</title>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('NameCtrl', ['$scope','$interval', function ($scope,$interval) {
    var i = 0;
    var timer; 
    $scope.message = "Div is Refreshed at " +  i  + "seconds";
        $scope.starttimer = function(){

            timer= $interval(function(){

                        $scope.message = "Div is Refreshed at " +  i  + "seconds";
                        i++;
            },1000)
            }
    $scope.stoptimer = function(){
            $interval.cancel(timer);
            timer = 'undefined';
            $scope.message = "Timer is killed";
    }
    $scope.$on('$destroy', function() {
      $scope.stop();
    });
}])
</script>
</head>

<body>
    <div ng-controller="NameCtrl">
        <input type="button" id="btnStart" ng-click="starttimer()" value="Start" />
        <input type="button" id="btnStop" ng-click="stoptimer()" value="Stop"/>
        {{message}}
    </div>
</body>

use $destroy method

$scope.$on('$destroy', function() {
      $scope.stop();
    });

remove this condition

angular.isUndefined(timer)

angular js timer function not working on stop button

3 Answers3