如何清除 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);
});

在滑块模板中，我有下一个和上一个函数的箭头 link

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

我只想在用户点击下一个或上一个按钮时添加清除 $timeout 功能，每次用户点击下一个或上一个按钮时，计时器都会清除并在 5 秒后更改图像。

这是关于 image slider

的完整文档

我为此创建了 JSFiddle please look at this

Answer 1

您可以通过检查标志来设置 $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
}

Working Fiddle

Answer 2

这是我的第三次尝试：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 3

嗨，@Roman 和@Pankaj 坦克提供了巨大的帮助... 使用此代码修复：

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

在 this 版本的@Roman 中编辑。

The Final version

Tanx 家伙 ...

如何清除 angularjs 中的 $timeout

How can clear $timeout in angularjs

javascript

angularjs

asynchronous

timeout

angularjs-timeout