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
– CaribouCode, Commented Apr 15, 2015 at 13:08
You can make your promise as a global variable to access it outside. — Zee
– Zee, Commented Apr 15, 2015 at 13:11

eladcon · Accepted Answer · 2015-04-15 13:09:07Z

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, 2015 at 13:09

eladcon

5,8251 gold badge18 silver badges19 bronze badges

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

5 Comments

CaribouCode Over a year ago

Isn't the timeout variable scoped within the slider function and therefore not accessible within the cancelTimer function?

CaribouCode Over a year ago

Ah no I see you've made it global first

eladcon Over a year ago

yeah its visible in both functions

CaribouCode Over a year ago

Yeh that works great thanks. Don't know why I didn't think to create it as a global variable like that

YOU Over a year ago

it is not global variable, since $scope is inside a function.

Michael Kang · Accepted Answer · 2015-04-15 13:11:11Z

0

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>

answered Apr 15, 2015 at 13:11

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Comments

Yaron Schwimmer · Accepted Answer · 2015-04-15 13:21:59Z

0

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>

edited Apr 15, 2015 at 13:21

answered Apr 15, 2015 at 13:16

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

Clear Angular timeout inside function

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related