fix($$rAF): always fallback to a $timeout incase native rAF isn't sup…

…ported Closes #6654
angular · Mar 14, 2014 · ee8e4a9 · ee8e4a9
1 parent a41a2a1
commit ee8e4a9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/src/ng/raf.js b/src/ng/raf.js
@@ -1,21 +1,29 @@
 'use strict';
 
 function $$RAFProvider(){ //rAF
-  this.$get = ['$window', function($window) {
+  this.$get = ['$window', '$timeout', function($window, $timeout) {
     var requestAnimationFrame = $window.requestAnimationFrame ||
                                 $window.webkitRequestAnimationFrame;
 
     var cancelAnimationFrame = $window.cancelAnimationFrame ||
                                $window.webkitCancelAnimationFrame;
 
-    var raf = function(fn) {
-      var id = requestAnimationFrame(fn);
-      return function() {
-        cancelAnimationFrame(id);
-      };
-    };
+    var rafSupported = !!requestAnimationFrame;
+    var raf = rafSupported
+      ? function(fn) {
+          var id = requestAnimationFrame(fn);
+          return function() {
+            cancelAnimationFrame(id);
+          };
+        }
+      : function(fn) {
+          var timer = $timeout(fn, 16.66, false); // 1000 / 60 = 16.666
+          return function() {
+            $timeout.cancel(timer);
+          };
+        };
 
-    raf.supported = !!requestAnimationFrame;
+    raf.supported = rafSupported;
 
     return raf;
   }];

diff --git a/test/ng/rafSpec.js b/test/ng/rafSpec.js
@@ -31,6 +31,38 @@ describe('$$rAF', function() {
     expect(present).toBe(true);
   }));
 
+  describe('$timeout fallback', function() {
+    it("it should use a $timeout incase native rAF isn't suppored", function() {
+      var timeoutSpy = jasmine.createSpy('callback');
+
+      //we need to create our own injector to work around the ngMock overrides
+      var injector = createInjector(['ng', function($provide) {
+        $provide.value('$timeout', timeoutSpy);
+        $provide.decorator('$window', function($delegate) {
+          $delegate.requestAnimationFrame = false;
+          $delegate.webkitRequestAnimationFrame = false;
+          $delegate.mozRequestAnimationFrame = false;
+          return $delegate;
+        });
+      }]);
+
+      var $$rAF = injector.get('$$rAF');
+      expect($$rAF.supported).toBe(false);
+
+      var message;
+      $$rAF(function() {
+        message = 'on';
+      });
+
+      expect(message).toBeUndefined();
+      expect(timeoutSpy).toHaveBeenCalled();
+
+      timeoutSpy.mostRecentCall.args[0]();
+
+      expect(message).toBe('on');
+    });
+  });
+
   describe('mocks', function() {
     it('should throw an error if no frames are present', inject(function($$rAF) {
       if($$rAF.supported) {