AngularJS：超时结束后执行函数答案

【问题标题】：AngularJS: Executing a function after timeout endsAngularJS：超时结束后执行函数
【发布时间】：2016-01-29 16:32:05
【问题描述】：

我有这个带有倒数计时器的 angularJS 应用程序。我想在它变为零后执行一个函数。目前达到0后变为负数，如何实现？

角度代码：

myApp.controller('MyController', ['$scope', '$timeout' ,function($scope, $http, $routeParams, $timeout) {
  $scope.counter = 5000;
    $scope.onTimeout = function(){
        $scope.counter--;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
  }
}]);


testControllers.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><p>{{counter|formatTimer}}</p></div>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

当计数器为 0 时停止调用它：

$scope.onTimeout = function(){
  if (--$scope.counter > 0) {
    $timeout($scope.onTimeout, 1000);
  } else {
    // Call your function now that counter is 0
  }
}

【讨论】：

您需要至少调用一次该函数才能继续调用自己：jsfiddle.net/L05oepmv（您在上面的代码中所做的，您的 jsfiddle 不同）

【解决方案2】：

根据您正在做的其他事情，您可能不需要将超时方法放在作用域上。另外，请查看 $interval 。它更适合连续调用。

function decreaseCounter() {
  if(--$scope.counter <= 0) {
    $interval.cancel(intervalPromise);
    yourOtherFunction();  
  }
}

var intervalPromise = $interval(decreaseCounter, 1000);

https://docs.angularjs.org/api/ng/service/$interval

【讨论】：

【解决方案3】：

如果您需要精确的倒计时（特别是如果时间跨度很大），您需要使用日期时间函数计算所花费的时间。简单地每 1000 毫秒递增一个计数器 5000 次，并不能保证最终花费的实际时间正好是 5000 秒！

你可以试试这样的：

控制器：

function MyCtrl($scope, $interval) {
  var intervalId;

  $scope.counter = 0;
  $scope.initialCountdown = 10;
  $scope.countdown = $scope.initialCountdown;

  $scope.timer = function(){
    var startTime = new Date();
    intervalId = $interval(function(){
        var actualTime = new Date();
        $scope.counter = Math.floor((actualTime - startTime) / 1000);
        $scope.countdown = $scope.initialCountdown - $scope.counter;
    }, 1000);
  };

  $scope.$watch('countdown', function(countdown){
    if (countdown === 0){
        $scope.stop();
    }
  });

  $scope.start = function(){
    $scope.timer();
  };

  $scope.stop = function(){
    $interval.cancel(intervalId);
  };

}

查看：

<div ng-controller="MyCtrl">
  <div>Counter: {{counter}}</div>
  <div>Countdown in seconds: {{countdown}}</div>  
  <div>Countdown date time: {{countdown | secondsToDateTime | date:'HH:mm:ss'}}</div>  
  <button ng-click="start()">start</button>
  <button ng-click="stop()">stop</button>      
</div>

Filter secondsToDateTime:

myApp.filter('secondsToDateTime', [function() {
    return function(seconds) {
        return new Date(1970, 0, 1).setSeconds(seconds);
    };
}])

CHECK THE DEMO FIDDLE

享受吧！

【讨论】：