angular js 计时器功能不适用于停止按钮

Question

我现在正在学习 angular js 为此，我已经使用计时器函数 init 使用 angular Js 编写了示例测试应用程序 ... 每当我运行浏览器中的应用程序我都能启动计数器时，当我点击停止按钮时，我无法停止计时器下面是我的定时器功能代码..

<!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>

任何人都可以指出正确的方向以及我在上面的代码中做错的地方来停止计时器..

请问有人帮忙吗..

Answer 1

您在 stoptimer 函数中的 if 语句中的条件缺少一个否定：

if(angular.isUndefined(timer)){

应该是

if(!angular.isUndefined(timer)){

Answer 2

试试这个，

<!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>

使用if(!angular.isUndefined(timer))代替if(angular.isUndefined(timer))

Answer 3

我编辑了你的代码，现在它可以正常工作了。

<!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>

使用$destroy方法

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

删除此条件

angular.isUndefined(timer)

angular js 计时器功能不适用于停止按钮

angular js timer function not working on stop button

javascript

jquery

timer

angularjs

angular-timer