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

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>