如何在angularjs中清除$timeout ?

Question

我有这段代码用于图像滑块和下一个预览以及自动更改图像功能

scope.next = function () {
    scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
};
scope.prev = function () {
    scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
};
scope.$watch('currentIndex', function () {
    scope.images.forEach(function (image) {
    image.visible = false;
    });
    scope.images[scope.currentIndex].visible = true;
});
var timer;
var sliderFunc = function () {
    timer = $timeout(function () {
        scope.next();
        timer = $timeout(sliderFunc, 5000);
    }, 5000);
};
sliderFunc();
scope.$on('$destroy', function () {
    $timeout.cancel(timer);
});

在滑块模板中，我有next和prev函数的箭头链接

  <div class="arrows">
    <a href="#" ng-click="prev()">
      <img src="tasavir/omgh/left-arrow.png" />
    </a>
    <a href="#" ng-click="next()">
      <img src="tasavir/omgh/right-arrow.png" />
    </a>
  </div>

我只是想在用户点击下一个或前一个btn时添加clear $timeout函数，每次用户点击下一个或前一个btn时定时器被清除，并在5s后更改图像。

这是关于图像滑块的完整文档

我为这个创建了JSFiddle请看这个

Answer 1

这是我的第三次尝试:https://jsfiddle.net/koljada/8cLw6wch/22/

         var timer = $interval(function () {
                 scope.changeImage();
         }, 5000);             
         scope.next = function () {                 
                $interval.cancel(timer);
                timer = $interval(function () {
                 scope.changeImage();
                }, 5000);                 
         };
     scope.changeImage = function () {                
             scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
         };

Answer 2

您可以通过检查标志来设置$scope.next函数的超时时间。

标记

<div class="arrows">
    <a href="#" ng-click="prev()">
      <img src="tasavir/omgh/left-arrow.png" />
    </a>
    <a href="#" ng-click="next(true)">
      <img src="tasavir/omgh/right-arrow.png" />
    </a>
</div>

var timer;
var sliderFunc = function () {
    timer = $timeout(function () {
        scope.next(false);
    }, 5000);
};
scope.next = function(setTimeoutToNext){
    scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
    if(setTimeoutToNext)
      $timeout.cancel(timer); //here it will clear the timeout
}

工作小提琴

Answer 3

@Roman和@Pankaj坦克帮了大忙…修复这个代码:

     scope.next = function () {                 
            $interval.cancel(timer);
            scope.changeImage(); // just add this line
            timer = $interval(function () {
             scope.changeImage();
            }, 5000);                 
     };

这个版本的@Roman编辑。

最终版本