Question

我将此帖子AngularJS ngcontroller to be reloading data periodically的代码基于每3秒重新加载一次数据。

我现在的问题是，当我点击某些内容时，我想停止自动刷新。之后，自动刷新将重新开始。

比如说，当我点击按钮停止时，自动刷新将停止。当我点击按钮开始时，它将每3秒钟再次开始提取数据。

这是我的js

var newsfeed = angular.module('newsfeed',[]);

newsfeed.controller('newsfeedController',function($scope,$http){
     var getPosts = function(){
        $http.get('http://localhost/must_sns/main/all_status').success(function(data){
                $scope.posts = data;
                console.log(data);
        }); 
    }
    getPosts();
    setInterval(getPosts, 3000);
});

Answer 1

您可以使用clearInterval功能：

newsfeed.controller('newsfeedController', function($scope, $http) {

    var interval;

    function getPosts() {
        $http.get('http://localhost/must_sns/main/all_status').success(function(data) {
            $scope.posts = data;
            console.log(data);
        });
    }

    $scope.start = function() {
        interval = setInterval(getPosts, 3000);
    };

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

    // Start loading
    $scope.start();

});

现在在HTML中，您可以使用start/stop方法：

<button ng-click="start()">Start</button>
<button ng-click="stop()">Stop</button>

Answer 2

您需要存储返回的intervalID。

var myInterval = setInterval(getPosts, 3000);

然后你可以在另一个函数中再次停止它（例如通过按下按钮来调用它：

clearInterval(myInterval);

在旁注上：Angular提供的$interval服务可能更适合您的事业。

Answer 3

对setInterval使用Angular包装器：$interval。然后你可以做这样的事情：

var newsfeed = angular.module('newsfeed',[]);

newsfeed.controller('newsfeedController',function($scope,$http, $interval){
     var getPosts = function(){
        $http.get('http://localhost/must_sns/main/all_status').success(function(data){
                $scope.posts = data;
                console.log(data);
        }); 
    };

    getPosts();
    var timer = $interval(getPosts, 3000);

    $scope.stopTimer = function () {
         $interval.cancel(timer);
    }
});

您将计时器的引用存储在变量timer中，然后您可以调用cancel上的$interval函数来停止计时器。

如果使用Angular包装器，那么它会使您的代码更易于测试。您可以使用$interval库中的$interval对象模拟ngMocks操作。最好依靠Angular包装器来实现这样的全局函数，这样你的代码就更容易测试了。

单击HTML元素时停止AngularJS自动刷新

3 个答案: