1

我现在正在学习 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>

谁能指出我正确的方向以及我在上面的代码中做错的地方以停止计时器..

任何人都可以帮助解决这个问题..

4

3 回答 3

1

stoptimer 函数中的 if 语句中的条件缺少否定：

if(angular.isUndefined(timer)){

应该

if(!angular.isUndefined(timer)){
于 2016-07-27T12:39:29.603 回答
1

尝试这个，

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

于 2016-07-27T12:40:24.400 回答
1

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

<!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)
于 2016-07-27T12:43:28.143 回答