Question

我想用angular.js制作类似洗牌器的东西。我们的想法是在开始时每隔200毫秒用一个新字符串升级视图，然后慢慢增加延迟，直到字符串不再变化并选择一个字符串为止。我的问题是，angular有一种类似于快速更改值的防御，因为当我在控制器中执行此代码时，只会显示第一个随机字符串。

$scope.shuffleStrings = function () {

        var arrayOfStrings = ['this', 'that', 'foo', 'bar', 'bim', 'bam', 'bum'];
        var delay = 100;

        var updateValue = function () {         

            $scope.crntString = arrayOfStrings[Math.floor(Math.random() * arrayOfStrings.length)];

            if(delay <= 1000) {
                delay += (10/100)*delay
                setTimeout(updateValue, delay);
            }
        }

        updateValue();
    }

Answer 1

使用$ timeout而不是setTimeout。阅读更多：https://docs.angularjs.org/api/ng/service/ $ timeout

Answer 2

为此使用$ interval ...

    $scope.arrayOfStrings = ['this', 'that', 'foo', 'bar', 'bim', 'bam', 'bum'];
    $scope.delay = 100;

    var updateValue = function () {         

        $scope.crntString = $scope.arrayOfStrings[Math.floor(Math.random() * 
             $scope.arrayOfStrings.length)];

        if($scope.delay <= 1000) {
            $scope.delay += (10/100)*$scope.delay
        }
    }

    var interval = $interval(updateValue,200);

   $scope.$on("$destroy", function(){
       $interval.cancel(interval);
   });

你的字符串没有得到更新，因为你正在使用setTimeout，使用$ timeout这是更角度的方式......

Answer 3

我不想使用简单的间隔，而是使用Timeout，因为我愿意每次都改变延迟。问题是我执行另一个函数，它不是一个角度函数，因此值不会更新。我的解决方案很简单$scope.$apply();。这是完整的代码：

$scope.shuffleStrings = function () {

        var arrayOfStrings = ['this', 'that', 'foo', 'bar', 'bim', 'bam', 'bum'];
        var delay = 100;

        var updateValue = function () {         

            $scope.crntString = arrayOfStrings[Math.floor(Math.random() * arrayOfStrings.length)];
            $scope.$apply();

            if(delay <= 1000) {
                delay += (10/100)*delay
                setTimeout(updateValue, delay);
            }
        }

        updateValue();
    }

在间隔中更新angular.js视图

3 个答案: