Question

我的代码中有三行：

$scope.isActive21 = !$scope.isActive21;
$scope.isActive31 = !$scope.isActive31;
$scope.isActive11 = !$scope.isActive11;

我希望先执行第一行，然后在500 ms之后执行，然后在500 ms之后再执行第三行。我怎样才能做到这一点？我尝试了$timeout并将这些行放在另一个名为“延迟”的函数中，但它看起来像是一个简单的开销，并且基本上没有用。

Plunkr：http://plnkr.co/edit/0y3pad?p=preview

$scope.delay = function(){

    var attempt=1

    if($scope.level==1 && $scope.round==2){
      $scope.isActive31 = !$scope.isActive31;
    }
    if($scope.level==1 && $scope.round==3){
      if(attempt==1){
        $scope.isActive31 = !$scope.isActive31;
        attempt++
        $timeout($scope.delay,500)
      }
      else if(attempt==2){
        $scope.isActive11 = !$scope.isActive11;
      }

    }
 }

它来自：

if($scope.level==1 && $scope.round==3){

    $scope.clickSequence=[]
    $scope.prompt=''
    $scope.congratulations=''
    $scope.failure=''

    $scope.message="Level 1 round 3 start"
    $scope.isActive21 = !$scope.isActive21;
    $timeout($scope.delay,500)
    // $scope.isActive31 = !$scope.isActive31;
    // $scope.isActive11 = !$scope.isActive11;

      $timeout($scope.finishRoundThree, 3000)

    }

我该怎么办？

Answer 1

我认为您需要重新考虑此应用的策略，因为它对您的所有isActive21和isActive32等变量都非常笨拙。我汇总了一个快速的小演示，展示了如何生成随机闪烁模式，这些模式可能会让您开始更易于维护的路径。也许你可以用它来获取灵感。以下是代码和here is a working JSFiddle。

CSS

.box {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    margin: 10px;
}
.green {
    background-color: green;
    opacity: 0.5;
}
.blue {
    background-color: blue;
    opacity: 0.5;
}
.red {
    background-color: red;
    opacity: 0.5;
}
.yellow {
    background-color: yellow;
    opacity: 0.5;
}
.lit {
    opacity: 1.0;
}

HTML 的

<div ng-app="app" ng-controller="ctrl">
    <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}"></div>
    <input type="number" ng-model="count">
    <button ng-click="start()">
        Start
    </button>
</div>

JS

angular.module('app', [])
    .controller('ctrl', function($scope, $timeout) {
        $scope.boxes = [{
            isLit: false,
            color: 'green'
        }, {
            isLit: false,
            color: 'blue'
        }, {
            isLit: false,
            color: 'red'
        }, {
            isLit: false,
            color: 'yellow'
        }];
        $scope.count = 2;
        $scope.randomOrder = [];
        $scope.start = function() {
            $scope.randomOrder = [];
            for (var i = 0; i < $scope.count; i++) {
                var randomNumber = Math.floor(Math.random() * 4);
                $scope.randomOrder.push(randomNumber);
            }
            $timeout(function() {
                $scope.blink(0);
            }, 500);
        }
        $scope.blink = function(index) {
            if (index < $scope.count) {
                $scope.boxes[$scope.randomOrder[index]].isLit = true;
                $timeout(function() {
                    $scope.boxes[$scope.randomOrder[index]].isLit = false;
                    $timeout(function() {
                        $scope.blink(index + 1);
                    }, 500);
                }, 500);
            }
        }
    });

Angular执行带延迟的连续语句

1 个答案: