角执行与延迟

Question

连续的语句我有三条线在我的代码：

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

我想执行的第一线，然后经过500毫秒秒钟，然后再经过500毫秒第三。我怎样才能做到这一点？我尝试了$timeout并将这些行放入另一个名为'delay'的函数中，但它看起来像是一个这样简单的事情的开销，并且基本上没有工作。

Plunkr：

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) 

    } 

我能做些什么：​​

$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; 
     } 

    } 
} 

并从叫什么名字？

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); 
      } 
     } 
    });