Question

我正在为此目的学习角度js我已经使用计时器函数init编写了带角度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)

角度js计时器功能不在停止按钮上工作

3 个答案: