AngularJS:在超时结束后执行函数

AngularJS: Executing a function after timeout ends

本文关键字：执行 函数 结束 超时 AngularJS      更新时间：2023-09-26

我有一个有倒数计时器的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>
只需在

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

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

根据您正在执行的其他操作，您可能不需要将超时方法放在作用域上。另外，请改为查看$interval。它更适合连续调用某些东西。

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

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

如果您需要精确的倒计时（特别是如果时间跨度很大），则需要使用日期时间函数计算所花费的时间。简单地将计数器每 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>

筛选秒到日期时间：

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

检查演示小提琴

享受！

相关文章：