Как очистить $ таймаута в angularjs

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); 
}); 

и в шаблоне слайдера У меня есть стрелки ссылаются на следующую и предыдущую функцию

<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

Привет @Roman и @Pankaj баки для огромной порции ... Fix с этим кодом:

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

в this версии @Roman отредактирован.

The Final version

Tanx парень ...

Answer 2

Вы могли бы сделать, установив тайм-аут от $scope.next функции путем проверки флага.

Markup

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

Это моя третья попытка: 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; 
     }; 

Надеюсь, это поможет вам.