Stop AngularJS auto refresh when clicking an HTML element

Question

I base my code from this post AngularJS ngcontroller to be reloading data periodically on reloading data every 3 seconds.

My problem now is, when I click something, I want to stop the auto refresh. After that, the auto refresh will start again.

Say for example, when I click a button stop, the auto refresh will stop. and when i click button start it will start fetching data again every 3 seconds.

here's my 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);
});

dfsq · Accepted Answer · 2014-10-07 13:35:04Z

1

You would use clearInterval function:

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();

});

Now in HTML you could use start/stop methods:

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

answered Oct 7, 2014 at 13:35

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Port 8080 Over a year ago

Thanks. it's working on button (as my question). But on side note, is this applicable when clicking/focusing my mouse in a textarea?

Port 8080 Over a year ago

when using ng-focus after the mouse lose focus on the textarea how can i fire up start() ?

dfsq Over a year ago

Use ng-blur="start()".

kasoban · Accepted Answer · 2014-10-07 13:33:22Z

0

You need to store the returned intervalID.

var myInterval = setInterval(getPosts, 3000);

then you can stop it again in another function (for example called by a button press like so:

clearInterval(myInterval);

On a sidenote: Angular supplies a $interval service that might be more suitable to your cause.

answered Oct 7, 2014 at 13:33

kasoban

2,17717 silver badges25 bronze badges

2 Comments

Port 8080 Over a year ago

but how can I apply $interval? sorry, noob question

kasoban Over a year ago

You need to inject it into your controller, see @sma answer for an example with $interval

sma · Accepted Answer · 2014-10-07 13:33:54Z

Use the Angular wrapper for setInterval: $interval. Then you can do something like this:

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

You store the reference to the timer in a variable timer and then you can call the cancel function on $interval to stop the timer.

If you use the Angular wrapper, then it makes your code much more testable. You can mock the $interval actions using the $interval object in the ngMocks library. Its better to rely on the Angular wrapper for global functions like that so that your code is more testable.

Collectives™ on Stack Overflow

Stop AngularJS auto refresh when clicking an HTML element

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related