javascript - Angular倒数计时，重新启动

我创建了一个简单的仪表板，其中一些数据作为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){

        })
    }
}

最佳答案

$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);
  }
});

关于javascript - Angular倒数计时，重新启动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44638710/