使用 angular 和超时进行计数器

Question

嘿，我正在尝试构建一个显示在 html 中的简单计数器。它有点工作，但它不听超时并给出一堆错误。

这是我遇到的错误

TypeError: fn is not a function

这是 javascript 函数和对象：

$scope.funFacts = {
    '1': {
        'text': 'Projecten',
        'amount': 3,
        'counter' : 0
    },
    '2': {
        'text': 'Blije klanten',
        'amount': 3,
        'counter' : 0
    },
    '3': {
        'text': 'Koffies per week',
        'amount': 15,
        'counter' : 0
    },
    '4': {
        'text': 'Pizza\'s gegeten',
        'amount': 45,
        'counter' : 0
    },
};

$scope.startAnimation = function(funFact) {
    var i = 1;
    $scope.ticker = function(funFact) {
        funFact.counter = i;
        i++;
        if (i <= funFact.amount) {
            $timeout($scope.ticker(funFact), 1000);
        }
    }
    $timeout($scope.ticker(funFact), 1000);
}

这是我用来显示和启动计数器的 html:

<section class="m-30">
    <div class="container">
        <div class="facts">
            <div class="col-md-3 col-sm-6 fact text-center p-20" ng-repeat="funFact in funFacts" ng-init="startAnimation(funFact)">
                <h1>{{funFact.counter}}</h1>
                <hr>
                <h5>{{funFact.text}}</h5>
            </div>
        </div>
    </div>
</section>

Answer 1

您需要将函数而不是函数调用传递给$timeout。第一个参数应该是 function，你传递的是 function call。你可以做的是：

$timeout(function(){$scope.ticker(funFact)}, 1000);

使用 angular 和超时进行计数器

Making a counter with angular and timout

html

javascript

counter

timeout

angularjs