Question

我试图通过随机选择一个随机类来“动画”一个div的css。目前我使用的递归函数如下所示：

$scope.spin = function() {
  console.log('spinning');
  var maxCycle = 100;
  var currentCycle = 0;

  recursiveRandomChange();

  function recursiveRandomChange() {
    if (currentCycle <= maxCycle) {
      currentCycle += 1;
      console.log(currentCycle);
      $interval(blockOne(), getRandomTime());
      recursiveRandomChange();
    }
  }

  function blockOne() {
    var currentClass = getRandomClass();
    $scope.engine.one = currentClass;
    console.log('changing color ', currentClass);
  }

};

正如您所看到的，它只允许100个周期，但是每当间隔结束时，它应该将“blockOne”的类（$ scope.engine.one）设置为随机类。我可以在控制台日志中看到正确运行的代码，但不是在随机时间循环遍历100个随机类，而是只更改一次（从原始颜色到在第100次迭代中随机选取的类）。

任何建议表示赞赏。谢谢！

Answer 1

检查一下：http://jsfiddle.net/pfgkna8k/4/
在recursiveRandomChange里面，你递归地调用了recursiveRandomChange＆amp;也使用$ interval。 $ interval本身是递归的。

angular.module('lists', []).controller('ProductList', function($scope, $interval) {
    var getRandomTime = function() {
        return 1000;
    };

    $scope.spin = function() {
        console.log('spinning');
        var maxCycle = 100;
        var currentCycle = 0;

        recursiveRandomChange();

        function recursiveRandomChange() {
            if (currentCycle <= maxCycle) {
                currentCycle += 1;
                console.log(currentCycle);
                $interval(blockOne, getRandomTime());
                //recursiveRandomChange();
            }
        }

        function blockOne() {
            var currentClass = getRandomClass();
            //$scope.engine.one = currentClass;
            var element = document.querySelector("#test");
            element.className = currentClass;
            console.log('changing color ', currentClass);
        }

        function getRandomClass() {
            var classes = ["abc", "abc1", "abc2", "abc3"];
            return classes[Math.round(Math.random() * 3)];
        }

    };
    $scope.spin(); 
});

Answer 2

所需要的是$interval而非$timeout，因为您希望每次都以不同方式更改颜色更改延迟时间。并且你想重复这种随机性100次。

$interval就是做一次。 $interval(blockOne, getRandomTime());是以固定的间隔多次执行此操作。

Ayush的答案中的

blockOne并未指定$timeout运行的次数。因此，它将永远运行..

我在Ayush代码中put some logging，您会看到随机延迟时间永远不会改变。

你真正想要的是链接100 $timeout以便它一个接一个地运行但不是并行运行。

您需要在每个var changes = []; changes[0] = function() { return $timeout(setColor,getRandomTime()); } changes[1] = function() { return $timeout(setColor,getRandomTime()); } ... // Chain them changes[0]() .then(changes[1]) .then(changes[2]);周围包装函数，然后再将它们链接起来。

.then()

在这种情况下，您想链接100次。我们不必输入$timeout.then() 100次，因为每个var executeChanges = changes[0]().then(changes[1]); executeChanges = executeChanges.then(changes[2]);仍然是一个承诺。

and trunc(ACTFINISH,'MM') = trunc(add_months(sysdate,-1),'MM')

我创建了一个有效的demo

使用ngClass

2 个答案: