角執行與延遲

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