清除角超时内部功能

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每4秒钟的价值。在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

尝试：

$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>