AngularJS计时器代码获胜'Don’不要经历所有其他条件

AngularJS timer code won't go through all if else conditions

本文关键字：经历条件其他 Don 代码计时器获胜 AngularJS 更新时间：2023-12-16

我遇到了if-else条件的问题。我设计了一个定时器，在四种情况下在控制台上显示不同的消息；然而，这些消息只显示控制台上的前两条消息。它不会进入第三和第四。它有什么问题？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script>
        var myApp = angular.module('myApp',[]);
        myApp.controller('TimeCtrl', ['$scope' , '$timeout', function ($scope , $timeout) {
            $scope.today = new Date();
            $scope.seconds = 0;
            $scope.max = 10;
            var stopped; 
            $scope.stopTimer = function(){
                $timeout.cancel(timer);
            };
            $scope.start = function(){
                timer = $timeout(function(){
                    $scope.seconds++;
                    console.log($scope.seconds);
                    if ($scope.seconds < 20) {
                        $scope.start();
                            if ( $scope.seconds < 5) {
                                //blue
                                console.log('progress-info');
                            }else if ( 5 <= $scope.seconds < 10 ) {
                                //green
                                console.log('progress-success');
                            }else if (  10 <= $scope.seconds < 15 ) {
                                //yellow
                                console.log('progress-warning');
                            }else if ( 15 <= $scope.seconds < 20){
                                //red
                                console.log('progress-danger'); 
                            };
                    }else{
                        $scope.stopTimer();
                    }
                },1000)
            }; 
        }]);
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="TimeCtrl">
    <button ng-click="start()">start</button>
    <button ng-click="stopTimer()">stop</button>
        current time {{seconds}}
    </div>
</body>

问题是

else if ( 5 <= $scope.seconds < 10 )

javascript测试这一点的方法是，如果5<=秒。如果为true，则条件为true，下一次评估为

true < 10

在这种情况下，javascript将true视为1，因此它将计算为true，并执行if块。

所以，如果$scope.seconds=11，那么这个语句将不是真的，但是：

5<=11->真->1，然后1<10->true，因此块执行

要修复，请将if语句更改为：

if(5 <= $scope.seconds && $scope.seconds < 10)

此外，值得注意的是，您的变量"timer"没有用"var"声明，所以您实际上是在设置window.timer——这是不可取的。

myApp.controller('TimeCtrl', ['$scope' , '$timeout', function ($scope , $timeout) {
        $scope.today = new Date();
        $scope.seconds = 0;
        $scope.max = 10;
        var stopped; 
        var timer;  //declare timer so it won't be global
        $scope.stopTimer = function(){
            $timeout.cancel(timer);
        };
        $scope.start = function(){
            timer = $timeout(function(){
                $scope.seconds++;
                console.log($scope.seconds);
                if ($scope.seconds < 20) {
                    $scope.start();
                        if ( $scope.seconds < 5) {
                            //blue
                            console.log('progress-info');
                        }else if ( 5 <= $scope.seconds < 10 ) {
                            //green
                            console.log('progress-success');
                        }else if (  10 <= $scope.seconds < 15 ) {
                            //yellow
                            console.log('progress-warning');
                        }else if ( 15 <= $scope.seconds < 20){
                            //red
                            console.log('progress-danger'); 
                        };
                }else{
                    $scope.stopTimer();
                }
            },1000)
        }; 
    }]);