清除 Angular 函数内部超时

Question

我用 Angular 构建了一个非常简单的滑块，如下所示：

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

滑块函数创建一个超时循环，每 4 秒更改一次 slider.pane 的值。在 HTML 中，我有一个 link，单击它时会将值 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>

清除 Angular 函数内部超时

Clear Angular timeout inside function

html

javascript

timeout

angularjs