Очистить Угловая таймаут внутри функции

Question

Я построил очень просто слайдер с Угловое, как так:

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

Функция слайдера создает цикл ожидания, чтобы изменить значение slider.pane каждого 4s. В HTML у меня есть ссылка, которая при нажатии устанавливает значение slider.auto в false.

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

При щелчке по нему необходимо остановить цикл таймаута. Это может быть в середине цикла в то время, поэтому мне нужно очистить таймаут, но он находится внутри функции, поэтому не уверен, как получить к ней доступ.

Answer 1

$timeout.cancel Используйте функцию:

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> 

Answer 2

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> 

Answer 3

Вы можете использовать метод cancel как некоторые люди предложили здесь.

Я действительно думаю, что в вашем случае вы должны использовать $interval вместо $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>