Bring back throttling for tile loading

In OpenLayers 2.12, only one tile was loaded per animation frame. This
change brings back something similar as part of the tile manager. But we
do not use requestAnimationFrame anymore, because @elemoine pointed out
that browsers may give requestAnimationFrame invoked functions a higher
priority than setTimeout invoked functions.

The reason for this change is
http://lists.osgeo.org/pipermail/openlayers-users/2013-April/028063.html.

examples/fullScreen.js

@@ -6,6 +6,7 @@ var urls = [
 
 var map = new OpenLayers.Map({
     div: "map",
+    tileManager: new OpenLayers.TileManager(),
     layers: [
         new OpenLayers.Layer.XYZ("OSM (with buffer)", urls, {
             transitionEffect: "resize", buffer: 2, sphericalMercator: true,

lib/OpenLayers/TileManager.js

@@ -33,6 +33,20 @@ OpenLayers.TileManager = OpenLayers.Class({
      */
     cacheSize: 256,
 
+    /**
+     * APIProperty: tilesPerFrame
+     * {Number} Number of queued tiles to load per frame (see <frameDelay>).
+     *     Default is 2.
+     */
+    tilesPerFrame: 2,
+
+    /**
+     * APIProperty: frameDelay
+     * {Number} Delay between tile loading frames (see <tilesPerFrame>) in
+     *     milliseconds. Default is 16.
+     */
+    frameDelay: 16,
+
     /**
      * APIProperty: moveDelay
      * {Number} Delay in milliseconds after a map's move event before loading
@@ -251,7 +265,9 @@ OpenLayers.TileManager = OpenLayers.Class({
     
     /**
      * Method: updateTimeout
-     * Applies the <moveDelay> or <zoomDelay> to the <drawTilesFromQueue> loop.
+     * Applies the <moveDelay> or <zoomDelay> to the <drawTilesFromQueue> loop,
+     * and schedules more queue processing after <frameDelay> if there are still
+     * tiles in the queue.
      *
      * Parameters:
      * map - {<OpenLayers.Map>} The map to update the timeout for
@@ -259,10 +275,14 @@ OpenLayers.TileManager = OpenLayers.Class({
      */
     updateTimeout: function(map, delay) {
         window.clearTimeout(this.tileQueueId[map.id]);
-        if (this.tileQueue[map.id].length) {
+        var tileQueue = this.tileQueue[map.id];
+        if (tileQueue.length) {
             this.tileQueueId[map.id] = window.setTimeout(
                 OpenLayers.Function.bind(function() {
                     this.drawTilesFromQueue(map);
+                    if (tileQueue.length) {
+                        this.updateTimeout(map, this.frameDelay);
+                    }
                 }, this), delay
             );
         }
@@ -341,8 +361,11 @@ OpenLayers.TileManager = OpenLayers.Class({
      */
     drawTilesFromQueue: function(map) {
         var tileQueue = this.tileQueue[map.id];
-        while (tileQueue.length) {
+        var limit = this.tilesPerFrame;
+        var animating = map.zoomTween && map.zoomTween.playing;
+        while (!animating && tileQueue.length && limit) {
             tileQueue.shift().draw(true);
+            --limit;
         }
     },