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中，我有一个链接，点击后将值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>

清除角度内部功能的超时

3 个答案: