Question

App.js中的角度计时器功能代码如下： -

$scope.counter = 1000;
$scope.countdown = function () {

    stopped = $timeout(function () {
        $scope.counter--;
        $scope.countdown();
    }, 1000);
    if ($scope.counter == 0) {
        $timeout.cancel(stopped);
    }
};

我的反指令如下： -

data.filter('formatTimer', function () {
return function (input) {
    function z(n) { return (n < 10 ? '0' : '') + n; }
    var seconds = input % 60;
    var minutes = Math.floor(input / 60);
    var hours = Math.floor(minutes / 60);
    return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
  };
});

在我的html模板代码中看起来像： -

 <div class="col-xs-3 col-md-4 push" align="center" ng-init="countdown()">
                            <div class="alt_heade_text">
                                {{counter|formatTimer}}
                            </div>
                        </div>

计时器对我来说工作正常，但它减少了时间（以秒为单位）5而不是1，出了什么问题???

Answer 1

正如Roman所说，你应该使用$ interval而不是$ timeout。

示例：

$scope.counter = 1000;
$scope.countdown = function () {

    var timer = $interval(function () {
        $scope.counter--;
    }, 1000, 1000);
};

这里的第一个和第二个参数类似于$ timeout - 第一个是运行每个间隔的函数，第二个是间隔的长度。第三个指定间隔重复的次数，因此将其设置为1000会使其在计数器达到0时自动停止。

Answer 2

请试试这个：

$scope.counter = 1000;
var promise=$interval(function(){
    $scope.counter--;
},1000);

$scope.$watch('counter', function(newValue, oldValue) {
    if(newValue==0)
        $interval.cancel(promise);
});

不要忘记在控制器中注入$ interval。

angularJs计时器无法正常工作

2 个答案: