Return a requestID from requestAnimationFrame, add cancelAnimationFrame.

Source/Core/cancelAnimationFrame.js

@@ -0,0 +1,44 @@
+/*global define*/
+define(function() {
+    "use strict";
+
+    var implementation = window.cancelAnimationFrame;
+    (function() {
+        // look for vendor prefixed function
+        if (typeof implementation === 'undefined') {
+            var vendors = ['webkit', 'moz', 'ms', 'o'];
+            var i = 0;
+            var len = vendors.length;
+            while (i < len && typeof implementation === 'undefined') {
+                implementation = window[vendors[i] + 'CancelAnimationFrame'];
+                if (typeof implementation === 'undefined') {
+                    implementation = window[vendors[i] + 'CancelRequestAnimationFrame'];
+                }
+                ++i;
+            }
+        }
+
+        // otherwise, assume requestAnimationFrame is based on setTimeout, so use clearTimeout
+        if (typeof implementation === 'undefined') {
+            implementation = clearTimeout;
+        }
+    })();
+
+    /**
+     * A browser-independent function to cancel an animation frame requested using @{link requestAnimationFrame}.
+     *
+     * @exports cancelAnimationFrame
+     *
+     * @param requestID The value returned by @{link requestAnimationFrame}.
+     *
+     * @see <a href='http://www.w3.org/TR/animation-timing/#the-WindowAnimationTiming-interface'>The WindowAnimationTiming interface</a>
+     */
+    var cancelAnimationFrame = function(requestID) {
+        // we need this extra wrapper function because the native cancelAnimationFrame
+        // functions must be invoked on the global scope (window), which is not the case
+        // if invoked as Cesium.cancelAnimationFrame(requestID)
+        implementation(requestID);
+    };
+
+    return cancelAnimationFrame;
+});

Source/Core/requestAnimationFrame.js

@@ -2,35 +2,37 @@
 define(function() {
     "use strict";
 
-    var requestAnimationFrameImplementation = window.requestAnimationFrame;
+    var implementation = window.requestAnimationFrame;
 
-    // look for vendor prefixed function
-    if (typeof requestAnimationFrameImplementation === 'undefined') {
-        var vendors = ['webkit', 'moz', 'ms', 'o'];
-        var i = 0;
-        var len = vendors.length;
-        while (i < len && typeof requestAnimationFrameImplementation === 'undefined') {
-            requestAnimationFrameImplementation = window[vendors[i] + 'RequestAnimationFrame'];
-            ++i;
+    (function() {
+        // look for vendor prefixed function
+        if (typeof implementation === 'undefined') {
+            var vendors = ['webkit', 'moz', 'ms', 'o'];
+            var i = 0;
+            var len = vendors.length;
+            while (i < len && typeof implementation === 'undefined') {
+                implementation = window[vendors[i] + 'RequestAnimationFrame'];
+                ++i;
+            }
         }
-    }
 
-    // build an implementation based on setTimeout
-    if (typeof requestAnimationFrameImplementation === 'undefined') {
-        var lastFrameTime = 0;
-        requestAnimationFrameImplementation = function(callback) {
-            var currentTime = Date.now();
+        // build an implementation based on setTimeout
+        if (typeof implementation === 'undefined') {
+            var lastFrameTime = 0;
+            implementation = function(callback) {
+                var currentTime = Date.now();
 
-            // schedule the callback to target 60fps, 16.7ms per frame,
-            // accounting for the time taken by the callback
-            var delay = Math.max(16 - (currentTime - lastFrameTime), 0);
-            lastFrameTime = currentTime + delay;
+                // schedule the callback to target 60fps, 16.7ms per frame,
+                // accounting for the time taken by the callback
+                var delay = Math.max(16 - (currentTime - lastFrameTime), 0);
+                lastFrameTime = currentTime + delay;
 
-            return setTimeout(function() {
-                callback(lastFrameTime);
-            }, delay);
-        };
-    }
+                return setTimeout(function() {
+                    callback(lastFrameTime);
+                }, delay);
+            };
+        }
+    })();
 
     /**
      * A browser-independent function to request a new animation frame.  This is used to create
@@ -40,6 +42,8 @@ define(function() {
      *
      * @param {Function} callback The function to call when animation is ready.
      *
+     * @returns An ID that can be passed to @{link cancelAnimationFrame} to cancel the request.
+     *
      * @example
      * // Create a draw loop using requestAnimationFrame. The
      * // tick callback function is called for every animation frame.
@@ -55,7 +59,8 @@ define(function() {
         // we need this extra wrapper function because the native requestAnimationFrame
         // functions must be invoked on the global scope (window), which is not the case
         // if invoked as Cesium.requestAnimationFrame(callback)
-        requestAnimationFrameImplementation(callback);
+        return implementation(callback);
     };
+
     return requestAnimationFrame;
 });

Specs/Core/requestAnimationFrameSpec.js

@@ -1,18 +1,21 @@
 /*global defineSuite*/
 defineSuite([
-             'Core/requestAnimationFrame'
-         ], function(
-             requestAnimationFrame) {
+         'Core/requestAnimationFrame',
+         'Core/cancelAnimationFrame'
+     ], function(
+         requestAnimationFrame,
+         cancelAnimationFrame) {
     "use strict";
     /*global jasmine,describe,xdescribe,it,xit,expect,beforeEach,afterEach,beforeAll,afterAll,spyOn,runs,waits,waitsFor*/
 
     it('calls the callback', function() {
         var callbackRan = false;
 
         runs(function() {
-            requestAnimationFrame(function() {
+            var requestID = requestAnimationFrame(function() {
                 callbackRan = true;
             });
+            expect(requestID).toBeDefined();
         });
 
         waitsFor(function() {
@@ -43,4 +46,33 @@ defineSuite([
             expect(callbackTimestamps[1]).toBeLessThanOrEqualTo(callbackTimestamps[2]);
         });
     });
+
+    it('can cancel a callback', function() {
+        var cancelledCallbackRan = false;
+
+        runs(function() {
+            var requestID = requestAnimationFrame(function() {
+                cancelledCallbackRan = true;
+            });
+            cancelAnimationFrame(requestID);
+        });
+
+        // schedule and wait for another callback
+
+        var secondCallbackRan = false;
+        runs(function() {
+            requestAnimationFrame(function() {
+                secondCallbackRan = true;
+            });
+        });
+
+        waitsFor(function() {
+            return secondCallbackRan;
+        });
+
+        runs(function() {
+            // make sure cancelled callback didn't run
+            expect(cancelledCallbackRan).toBe(false);
+        });
+    });
 });