Clear Angular timeout inside function

Question

I've built a very simply slider with Angular like so:

$scope.slider = {};
$scope.slider.pane = 1;
$scope.slider.auto = true;

var slider = function(){
  $timeout(function(){
    if ($scope.slider.pane === 4) $scope.slider.pane = 1;
    else $scope.slider.pane ++;
    slider();
  }, 4000);
}
slider();

The slider function creates a timeout loop to change the value of slider.pane every 4s. In the HTML I have a link that when clicked sets the value slider.auto to false.

<a href="" ng-click="slider.auto=false">Stop slider</a>

When this is clicked, it needs to stop the timeout loop. It may be in the middle of a cycle at the time, so I need to clear the timeout, but it's inside a function so not sure how to access it.

@Sourabh- thanks but this doesn't work. The promise variable would not be accessible outside my slider function. — CaribouCode, Apr 15 '15 at 13:08
You can make your promise as a global variable to access it outside. — Zee, Apr 15 '15 at 13:11

score 4 · Accepted Answer · answered Apr 15 '15 at 13:09

4

Use the $timeout.cancel function:

var timeout;
$scope.cancelTimer = function() {
    $scope.slider.auto=false;
    $timeout.cancel(timeout);
};

var slider = function(){
  timeout = $timeout(function(){
    if ($scope.slider.pane === 4) $scope.slider.pane = 1;
    else $scope.slider.pane ++;
    slider();
  }, 4000);
}
slider();

//HTML
<a href="" ng-click="cancelTimer()">Stop slider</a>

answered Apr 15 '15 at 13:09

eladcon

5,815
1
16
19

Isn't the timeout variable scoped within the slider function and therefore not accessible within the cancelTimer function? – CaribouCode Apr 15 '15 at 13:10
Ah no I see you've made it global first – CaribouCode Apr 15 '15 at 13:11
yeah its visible in both functions – eladcon Apr 15 '15 at 13:11
Yeh that works great thanks. Don't know why I didn't think to create it as a global variable like that – CaribouCode Apr 15 '15 at 13:13
it is not global variable, since $scope is inside a function. – YOU Apr 15 '15 at 13:20

score 0 · Answer 2 · answered Apr 15 '15 at 13:11

Try:

$scope.slider = {};
$scope.slider.pane = 1;
$scope.slider.auto = true;
var promise;
var slider = function(){
  promise = $timeout(function(){
    if ($scope.slider.pane === 4) $scope.slider.pane = 1;
    else $scope.slider.pane ++;
    slider();
  }, 4000);
}
$scope.autoSliderFalse = function() {
    $scope.slider.auto = false;
    if(promise)
       $timeout.cancel(promise);
});
slider();

HTML

<a href="" ng-click="autoSliderFalse()">Stop slider</a>

Yaron Schwimmer · Answer 3 · 2015-04-15T13:21:59.290

You can use the cancel method as some people suggested here.

I actually think in your case you should use $interval instead of $timeout.

var interval = $interval(function(){
  if ($scope.slider.pane === 4) {
    $scope.slider.pane = 1;
  }
  else {
    $scope.slider.pane ++;
  }    
}, 4000);

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

//html
<a href="" ng-click="stopSlider()">Stop slider</a>

Clear Angular timeout inside function

3 Answers3