Throttle calls to "window.history.replaceState" to fix Mobile Safari error message

src/source/tile.js

@@ -61,7 +61,6 @@ class Tile {
     expirationTime: any;
     expiredRequestCount: number;
     state: TileState;
-    placementThrottler: any;
     timeAdded: any;
     fadeEndTime: any;
     rawTileData: ArrayBuffer;

src/ui/hash.js

@@ -2,6 +2,7 @@
 
 const util = require('../util/util');
 const window = require('../util/window');
+const throttle = require('../util/throttle');
 
 import type Map from './map';
 
@@ -13,12 +14,17 @@ import type Map from './map';
  */
 class Hash {
     _map: Map;
+    _updateHash: () => void;
 
-    constructor() {
+    constructor(options: ?{throttle?: Boolean;}) {
         util.bindAll([
             '_onHashChange',
             '_updateHash'
         ], this);
+
+        // Mobile Safari doesn't allow updating the hash more than 100 times per 30 seconds.
+        const throttleTime = (options && options.throttle === false) ? 0 : 30 * 1000 / 100;
+        this._updateHash = throttle(this._updateHashUnthrottled.bind(this), throttleTime);
     }
 
     /*
@@ -82,7 +88,7 @@ class Hash {
         return false;
     }
 
-    _updateHash() {
+    _updateHashUnthrottled() {
         const hash = this.getHashString();
         window.history.replaceState('', '', hash);
     }

src/util/throttle.js

@@ -0,0 +1,36 @@
+// @flow
+
+/**
+ * Throttle the given function to run at most every `period` milliseconds.
+ */
+module.exports = function(unthrottledFunction: () => void, period: number): () => void {
+
+    // The next time (unix epoch) that the function is allowed to execute
+    let nextTime = 0;
+
+    // `true` if there is a pending "setTimeout" operation that'll invoke the
+    // function at a later time. `false` if there is not.
+    let pending = false;
+
+    const throttledFunction = () => {
+        const time = Date.now();
+
+        if (nextTime <= time && !pending) {
+            nextTime = time + period;
+            unthrottledFunction();
+        } else if (!pending) {
+            pending = true;
+            // eslint-disable-next-line no-use-before-define
+            setTimeout(_throttledFunction, nextTime - time);
+        }
+    };
+
+    // This callback to `setTimeout` is written outside `throttledFunction` to
+    // reduce the number of closures created.
+    const _throttledFunction = () => {
+        pending = false;
+        throttledFunction();
+    };
+
+    return throttledFunction;
+};

test/unit/ui/hash.test.js

@@ -7,7 +7,7 @@ const Map = require('../../../src/ui/map');
 
 test('hash', (t) => {
     function createHash() {
-        return new Hash();
+        return new Hash({throttle: false});
     }
 
     function createMap() {

test/unit/util/throttle.test.js

@@ -0,0 +1,49 @@
+'use strict';
+// @flow
+
+const test = require('mapbox-gl-js-test').test;
+const throttle = require('../../../src/util/throttle');
+
+test('throttle', (t) => {
+
+    t.test('does not execute unthrottled function unless throttled function is invoked', (t) => {
+        let executionCount = 0;
+        throttle(() => { executionCount++; }, 0);
+        t.equal(executionCount, 0);
+        t.end();
+    });
+
+    t.test('executes unthrottled function immediately when period is 0', (t) => {
+        let executionCount = 0;
+        const throttledFunction = throttle(() => { executionCount++; }, 0);
+        throttledFunction();
+        throttledFunction();
+        throttledFunction();
+        t.equal(executionCount, 3);
+        t.end();
+    });
+
+    t.test('executes unthrottled function immediately once when period is > 0', (t) => {
+        let executionCount = 0;
+        const throttledFunction = throttle(() => { executionCount++; }, 5);
+        throttledFunction();
+        throttledFunction();
+        throttledFunction();
+        t.equal(executionCount, 1);
+        t.end();
+    });
+
+    t.test('queues exactly one execution of unthrottled function when period is > 0', (t) => {
+        let executionCount = 0;
+        const throttledFunction = throttle(() => { executionCount++; }, 5);
+        throttledFunction();
+        throttledFunction();
+        throttledFunction();
+        setTimeout(() => {
+            t.equal(executionCount, 2);
+            t.end();
+        }, 10);
+    });
+
+    t.end();
+});