feat(carousel): use $interval instead of $timeout

src/carousel/carousel.js

@@ -7,11 +7,12 @@
 *
 */
 angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
-.controller('CarouselController', ['$scope', '$timeout', '$transition', function ($scope, $timeout, $transition) {
+.controller('CarouselController', ['$scope', '$timeout', '$interval', '$transition', function ($scope, $timeout, $interval, $transition) {
   var self = this,
     slides = self.slides = [],
     currentIndex = -1,
-    currentTimeout, isPlaying;
+    currentInterval,
+    isPlaying;
   self.currentSlide = null;
 
   var destroyed = false;
@@ -61,7 +62,7 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
       self.currentSlide = nextSlide;
       currentIndex = nextIndex;
       //every time you change slides, reset the timer
-      restartTimer();
+      restartInterval();
     }
     function transitionDone(next, current) {
       angular.extend(next, {direction: '', active: true, leaving: false, entering: false});
@@ -108,28 +109,27 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
     return slides;
   };
 
-  $scope.$watch('interval', restartTimer);
-  $scope.$on('$destroy', resetTimer);
+  $scope.$watch('interval', restartInterval);
+  $scope.$on('$destroy', stopInterval);
 
-  function restartTimer() {
-    resetTimer();
+  function restartInterval() {
+    stopInterval();
     var interval = +$scope.interval;
     if (!isNaN(interval) && interval>=0) {
-      currentTimeout = $timeout(timerFn, interval);
+      currentInterval = $interval(intervalFn, interval);
     }
   }
 
-  function resetTimer() {
-    if (currentTimeout) {
-      $timeout.cancel(currentTimeout);
-      currentTimeout = null;
+  function stopInterval() {
+    if (currentInterval) {
+      $interval.cancel(currentInterval);
+      currentInterval = null;
     }
   }
 
-  function timerFn() {
+  function intervalFn() {
     if (isPlaying) {
       $scope.next();
-      restartTimer();
     } else {
       $scope.pause();
     }
@@ -138,13 +138,13 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
   $scope.play = function() {
     if (!isPlaying) {
       isPlaying = true;
-      restartTimer();
+      restartInterval();
     }
   };
   $scope.pause = function() {
     if (!$scope.noPause) {
       isPlaying = false;
-      resetTimer();
+      stopInterval();
     }
   };
 

src/carousel/test/carousel.spec.js

@@ -2,12 +2,12 @@ describe('carousel', function() {
   beforeEach(module('ui.bootstrap.carousel'));
   beforeEach(module('template/carousel/carousel.html', 'template/carousel/slide.html'));
 
-  var $rootScope, $compile, $controller, $timeout;
-  beforeEach(inject(function(_$rootScope_, _$compile_, _$controller_, _$timeout_) {
+  var $rootScope, $compile, $controller, $interval;
+  beforeEach(inject(function(_$rootScope_, _$compile_, _$controller_, _$interval_) {
     $rootScope = _$rootScope_;
     $compile = _$compile_;
     $controller = _$controller_;
-    $timeout = _$timeout_;
+    $interval = _$interval_;
   }));
 
   describe('basics', function() {
@@ -126,12 +126,12 @@ describe('carousel', function() {
       //no timeout to flush, interval watch doesn't make a new one when interval is invalid
       testSlideActive(0);
       scope.$apply('interval = 1000');
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(1);
       scope.$apply('interval = false');
       testSlideActive(1);
       scope.$apply('interval = 1000');
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(2);
     });
 
@@ -156,34 +156,34 @@ describe('carousel', function() {
 
     it('should be playing by default and cycle through slides', function() {
       testSlideActive(0);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(1);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(2);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(0);
     });
 
     it('should pause and play on mouseover', function() {
       testSlideActive(0);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(1);
       elm.trigger('mouseenter');
-      expect($timeout.flush).toThrow();//pause should cancel current timeout
+      expect($interval.flush).toThrow();//pause should cancel current timeout
       testSlideActive(1);
       elm.trigger('mouseleave');
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(2);
     });
 
     it('should not pause on mouseover if noPause', function() {
       scope.$apply('nopause = true');
       testSlideActive(0);
       elm.trigger('mouseenter');
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(1);
       elm.trigger('mouseleave');
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(2);
     });
 
@@ -193,7 +193,7 @@ describe('carousel', function() {
       scope.$apply('slides.splice(0,1)');
       expect(elm.find('div.item').length).toBe(2);
       testSlideActive(1);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(0);
       scope.$apply('slides.splice(1,1)');
       expect(elm.find('div.item').length).toBe(1);
@@ -227,14 +227,14 @@ describe('carousel', function() {
 
     it('issue 1414 - should not continue running timers after scope is destroyed', function() {
       testSlideActive(0);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(1);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(2);
-      $timeout.flush();
+      $interval.flush(scope.interval);
       testSlideActive(0);
       scope.$destroy();
-      expect($timeout.flush).toThrow('No deferred tasks to be flushed');
+      expect($interval.flush).toThrow('No deferred tasks to be flushed');
     });
 
   });
@@ -300,12 +300,12 @@ describe('carousel', function() {
         scope.interval = 2000;
         scope.$digest();
 
-        $timeout.flush();
+        $interval.flush();
         expect(scope.next.calls.length).toBe(1);
 
         scope.$destroy();
 
-        $timeout.flush(scope.interval);
+        $interval.flush(scope.interval);
         expect(scope.next.calls.length).toBe(1);
       });
     });