Angular - 延迟forEach

Question

我有问题。我正在尝试创建一个动画，通过绘制之间的超时来更改多个图层的颜色。

$scope.StartMovementsAnimation = function()
{
      angular.forEach($scope.GameMovements, function(movement){
       if (movement == "Green")
       {
          $scope.Green = true;
       }
       else (movement == "Orange")
       {
          $scope.Orange = true;
       } 
  });
}

我遇到的问题是我不知道如何停止或延迟流循环。我很丢失。我尝试使用$ timeout，睡眠等但不起作用。

任何解决方案？

感谢

Answer 1

不要使用forEach。使用$ timeout重复GameMovements数组中的项目数。

看一下下面的例子。它会将className字段从橙色更改为绿色，反之亦然，直到变量left的值达到0。

$scope.className = "orange";
$scope.count = 0;
$scope.startAnimation = function() {
  var left = 10
  var ticker = function() {
    if (left % 2 === 0)
      $scope.className = 'orange'
    else
      $scope.className = 'green'
    left -= 1
    if (left > 0) {
      $timeout(ticker, 1000)
    }
  }

  $timeout(ticker, 1000)
}