Question

我创建了一个简单的仪表板，其中一些数据作为Angular中的试用版。使用PHP，我可以通过Google新闻获得一些天气数据，新闻和关于关键字的10条推文。

使用$ interval我每隔10秒刷新一次仪表板，但我希望倒计时从10到0，当触发间隔时，它会反复开始。

有人可以帮助我实现这个目标吗？

当前代码为submitbutton和$ interval触发器：

$scope.formSubmit = function(){ 
    $scope.getResults();
    if($scope.interval){            
        intervalController();
    }
}

function intervalController(){
    $interval($scope.getResults, 10000);
}

$scope.getResults = function(){
    if($scope.city){
        $http({
            method: 'POST',
            url: 'server.php',
            data: {city : $scope.city}
        }).then(function successCallback(response){
            console.log(response.data);
                //some data processing here
        }, function errorCallback(response){

        })
    }
}

Answer 1

$scope.initialCountDownValue = 10;
$scope.countDownValue = $scope.initialCountDownValue;
var intervalCanceller = null;

$scope.formSubmit = function(){ 
    $scope.getResults();
    if($scope.interval){            
        intervalController();
    }
}


function decrementCountdown() {
  $scope.countDownValue -= 1;
  if ( $scope.countDownValue === 0) {
    $scope.getResults();
    $scope.countDownValue = $scope.initialCountDownValue;
  }
}

function intervalController(){
    intervalCanceller = $interval(decrementCountdown, 1000);
}

$scope.getResults = function(){
    if($scope.city){
        $http({
            method: 'POST',
            url: 'server.php',
            data: {city : $scope.city}
        }).then(function successCallback(response){
            console.log(response.data);
                //some data processing here
        }, function errorCallback(response){

        })
    }
}

在$scope.countDownValue中，您的倒计时值显示给用户。

还有一点。

不要忘记取消订阅范围销毁的$ interval。或者你将有一段时间永生。以下是正确破坏间隔的方法：

$scope.$on('$destroy', function() {
  if (intervalCanceller) {
    $interval.cancel(intervalCanceller);
  }
});

Angular倒计时，重启

1 个答案: