fix(core): ensure that multiple requests to requestAnimationFrame are buffered

IE11 (and maybe some other browsers) do not optimize multiple calls to
rAF. This code makes that happen internally within the $$rAF service
before the next frame kicks in.

Closes #11791

Author: matsko

src/ng/raf.js

@@ -10,7 +10,7 @@ function $$RAFProvider() { //rAF
                                $window.webkitCancelRequestAnimationFrame;
 
     var rafSupported = !!requestAnimationFrame;
-    var raf = rafSupported
+    var rafFn = rafSupported
       ? function(fn) {
           var id = requestAnimationFrame(fn);
           return function() {
@@ -24,8 +24,46 @@ function $$RAFProvider() { //rAF
           };
         };
 
-    raf.supported = rafSupported;
+    queueFn.supported = rafSupported;
 
-    return raf;
+    var cancelLastRAF;
+    var taskCount = 0;
+    var taskQueue = [];
+    return queueFn;
+
+    function flush() {
+      for (var i = 0; i < taskQueue.length; i++) {
+        var task = taskQueue[i];
+        if (task) {
+          taskQueue[i] = null;
+          task();
+        }
+      }
+      taskCount = taskQueue.length = 0;
+    }
+
+    function queueFn(asyncFn) {
+      var index = taskQueue.length;
+
+      taskCount++;
+      taskQueue.push(asyncFn);
+
+      if (index === 0) {
+        cancelLastRAF = rafFn(flush);
+      }
+
+      return function cancelQueueFn() {
+        if (index >= 0) {
+          taskQueue[index] = null;
+          index = null;
+
+          if (--taskCount === 0 && cancelLastRAF) {
+            cancelLastRAF();
+            cancelLastRAF = null;
+            taskQueue.length = 0;
+          }
+        }
+      };
+    }
   }];
 }

test/ng/rafSpec.js

@@ -31,6 +31,46 @@ describe('$$rAF', function() {
     expect(present).toBe(true);
   }));
 
+  it('should only consume only one RAF if multiple async functions are registered before the first frame kicks in', inject(function($$rAF) {
+    if (!$$rAF.supported) return;
+
+    //we need to create our own injector to work around the ngMock overrides
+    var rafLog = [];
+    var injector = createInjector(['ng', function($provide) {
+      $provide.value('$window', {
+        location: window.location,
+        history: window.history,
+        webkitRequestAnimationFrame: function(fn) {
+          rafLog.push(fn);
+        }
+      });
+    }]);
+
+    $$rAF = injector.get('$$rAF');
+
+    var log = [];
+    function logFn() {
+      log.push(log.length);
+    }
+
+    $$rAF(logFn);
+    $$rAF(logFn);
+    $$rAF(logFn);
+
+    expect(log).toEqual([]);
+    expect(rafLog.length).toBe(1);
+
+    rafLog[0]();
+
+    expect(log).toEqual([0,1,2]);
+    expect(rafLog.length).toBe(1);
+
+    $$rAF(logFn);
+
+    expect(log).toEqual([0,1,2]);
+    expect(rafLog.length).toBe(2);
+  }));
+
   describe('$timeout fallback', function() {
     it("it should use a $timeout incase native rAF isn't suppored", function() {
       var timeoutSpy = jasmine.createSpy('callback');