Re-introducing tileLoadingDelay.

Only use it if no native requestAnimationFrame function is available. This should improve performance on mobile devices.

lib/OpenLayers/Animation.js

@@ -15,6 +15,16 @@
  */
 OpenLayers.Animation = (function(window) {
 
+    /**
+     * Property: isNative
+     * {Boolean} true if a native requestAnimationFrame function is available
+     */
+    var isNative = !!(window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        window.oRequestAnimationFrame ||
+        window.msRequestAnimationFrame);
+
     /**
      * Function: requestFrame
      * Schedule a function to be called at the next available animation frame.
@@ -89,6 +99,7 @@ OpenLayers.Animation = (function(window) {
     }
 
     return {
+        isNative: isNative,
         requestFrame: requestFrame,
         start: start,
         stop: stop

lib/OpenLayers/Layer/Grid.js

@@ -97,16 +97,38 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      */
     numLoadingTiles: 0,
 
+    /**
+     * APIProperty: tileLoadingDelay
+     * {Integer} Number of milliseconds before we shift and load
+     *     tiles when panning. Ignored if <OpenLayers.Animation.isNative> is
+     *     true. Default is 85.
+     */
+    tileLoadingDelay: 85,
+
     /**
      * Property: serverResolutions
      * {Array(Number}} This property is documented in subclasses as
      *     an API property.
      */
     serverResolutions: null,
 
+    /**
+     * Property: moveTimerId
+     * {Number} The id of the <deferMoveGriddedTiles> timer.
+     */
+    moveTimerId: null,
+
+    /**
+     * Property: deferMoveGriddedTiles
+     * {Function} A function that defers execution of <moveGriddedTiles> by
+     *     <tileLoadingDelay>. If <OpenLayers.Animation.isNative> is true, this
+     *     is null and unused.
+     */
+    deferMoveGriddedTiles: null,
+
     /**
      * Property: tileQueueId
-     * {Number} - The id of the <drawTileFromQueue> animation.
+     * {Number} The id of the <drawTileFromQueue> animation.
      */
     tileQueueId: null,
 
@@ -115,7 +137,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * {Array(<OpenLayers.Tile>)} Tiles queued for drawing.
      */
     tileQueue: null,
-
+    
     /**
      * Property: backBuffer
      * {DOMElement} The back buffer.
@@ -187,6 +209,13 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
                                                                 arguments);
         this.grid = [];
         this.tileQueue = [];
+
+        if (!OpenLayers.Animation.isNative) {
+            this.deferMoveGriddedTiles = OpenLayers.Function.bind(function() {
+                this.moveGriddedTiles(true);
+                this.moveTimerId = null;
+            }, this);
+        }
     },
 
     /**
@@ -197,6 +226,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * map - {<OpenLayers.Map>} The map.
      */
     removeMap: function(map) {
+        if (this.moveTimerId !== null) {
+            window.clearTimeout(this.moveTimerId);
+        }
         this.clearTileQueue();
         if(this.backBufferTimerId !== null) {
             window.clearTimeout(this.backBufferTimerId);
@@ -984,8 +1016,21 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
 
     /**
      * Method: moveGriddedTiles
+     *
+     * Parameter:
+     * deferred - {Boolean} true if this is a deferred call that should not
+     * be delayed.
      */
-    moveGriddedTiles: function() {
+    moveGriddedTiles: function(deferred) {
+        if (!deferred && !OpenLayers.Animation.isNative) {
+            if (this.moveTimerId != null) {
+                window.clearTimeout(this.moveTimerId);
+            }
+            this.moveTimerId = window.setTimeout(
+                this.deferMoveGriddedTiles, this.tileLoadingDelay
+            );
+            return;
+        }
         var buffer = this.buffer || 1;
         var scale = this.getResolutionScale();
         while(true) {

lib/OpenLayers/Tile/Image.js

@@ -6,6 +6,7 @@
 
 /**
  * @requires OpenLayers/Tile.js
+ * @requires OpenLayers/Animation.js
  */
 
 /**

tests/Animation.html

@@ -15,7 +15,8 @@
         <script>
 
         function test_all(t) {
-            t.plan(7);
+            t.plan(8);
+            t.ok(OpenLayers.Animation.isNative !== undefined, "isNative is set.");
             t.open_window("Animation.html", function(win) {
                 win.requestFrame(t);
                 win.start(t);

tests/Layer/Grid.html

@@ -213,13 +213,35 @@
 
     function test_Layer_Grid_moveTo(t) {
 
-    t.plan(13);
+        t.plan(17);
+
+        var origIsNative = OpenLayers.Animation.isNative;
+        OpenLayers.Animation.isNative = false;
 
         var map = new OpenLayers.Map('map');
         layer = new OpenLayers.Layer.WMS(name, url, params);
         layer.destroy = function() {}; //we're going to do funky things with the grid
         layer.applyBackBuffer = function() {}; // backbuffering isn't under test here
         map.addLayer(layer);
+        map.setCenter([-10, 0], 5);
+
+        var log = [];
+        layer.deferMoveGriddedTiles = function() {
+            log.push("deferMoveGriddedTiles");
+            OpenLayers.Layer.WMS.prototype.deferMoveGriddedTiles.apply(this, arguments);
+        }
+        layer.moveGriddedTiles = function() {
+            log.push("moveGriddedTiles");
+            OpenLayers.Layer.WMS.prototype.moveGriddedTiles.apply(this, arguments);
+        }
+        map.moveTo([5, 0]);
+        t.eq(log[0], "moveGriddedTiles", "deferred after moveTo");
+        map.moveTo([0, 0]);
+        t.eq(log[1], "moveGriddedTiles", "deferred again after another moveTo");
+        t.eq(log.length, 2, "no tiles loaded yet");
+        t.delay_call(0.1, function() {
+            t.eq(log[2], "deferMoveGriddedTiles", "tiles moved after tileLoadingDelay");
+        });
 
     //make sure null bounds doesnt cause script error. 
     // no test necessary, just action
@@ -228,7 +250,6 @@
         layer.moveTo(); //checks to make sure null bounds doesnt break us
 
 
-
       //observing globals
         layer.initSingleTile = function(bounds) {
             g_WhichFunc = "InitSingle";
@@ -242,6 +263,9 @@
             g_WhichFunc = "MoveGridded";
             g_Bounds = layer.map.getExtent();
         };
+        layer.deferMoveGriddedTiles = function() {
+            g_WhichFunc = "DeferMoveGridded";
+        }
         var clearTestBounds = function() {
             g_WhichFunc = null;
             g_Bounds = null;
@@ -349,6 +373,7 @@
         t.ok(g_WhichFunc == "InitGridded", "if tiles drastically out of bounds, we call initGriddedTile()");
         t.ok(g_Bounds.equals(b), "if tiles drastically out of bounds, we call initGriddedTile() with correct bounds");
 
+        OpenLayers.Animation.isNative = origIsNative;
     }
 
     /** THIS WOULD BE WHERE THE TESTS WOULD GO FOR