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

【问题标题】：Stop AngularJS auto refresh when clicking an HTML element单击 HTML 元素时停止 AngularJS 自动刷新
【发布时间】：2014-12-01 22:48:38
【问题描述】：

我在这篇 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);
});

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案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>

【讨论】：

谢谢。它正在按钮上工作（作为我的问题）。但附带说明一下，当我在文本区域中单击/聚焦我的鼠标时，这是否适用？
当使用ng-focus 鼠标失去对文本区域的关注时，我如何启动start()？
使用ng-blur="start()"。

【解决方案2】：

您需要存储返回的intervalID。

var myInterval = setInterval(getPosts, 3000);

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

clearInterval(myInterval);

附带说明：Angular 提供了一个$interval 服务，它可能更适合您的事业。

【讨论】：

但是如何应用 $interval？对不起，菜鸟问题
您需要将其注入到您的控制器中，请参阅@sma 答案中的 $interval 示例

【解决方案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 中，然后您可以在$interval 上调用cancel 函数来停止计时器。

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

【讨论】：