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,16 @@ import type Map from './map';
  */
 class Hash {
     _map: Map;
+    _updateHash: () => number;
 
     constructor() {
         util.bindAll([
             '_onHashChange',
             '_updateHash'
         ], this);
+
+        // Mobile Safari doesn't allow updating the hash more than 100 times per 30 seconds.
+        this._updateHash = throttle(this._updateHashUnthrottled.bind(this), 30 * 1000 / 100);
     }
 
     /*
@@ -82,7 +87,7 @@ class Hash {
         return false;
     }
 
-    _updateHash() {
+    _updateHashUnthrottled() {
         const hash = this.getHashString();
         window.history.replaceState('', '', hash);
     }

src/util/throttle.js

@@ -0,0 +1,26 @@
+// @flow
+
+/**
+ * Throttle the given function to run at most every `period` milliseconds.
+ */
+module.exports = function throttle(fn: () => void, time: number): () => number {
+    let pending = false;
+    let timerId = 0;
+
+    const later = () => {
+        timerId = 0;
+        if (pending) {
+            fn();
+            timerId = setTimeout(later, time);
+            pending = false;
+        }
+    };
+
+    return () => {
+        pending = true;
+        if (!timerId) {
+            later();
+        }
+        return timerId;
+    };
+};

test/unit/ui/hash.test.js

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

test/unit/util/throttle.test.js

@@ -0,0 +1,53 @@
+'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 once per tick when period is 0', (t) => {
+        let executionCount = 0;
+        const throttledFunction = throttle(() => { executionCount++; }, 0);
+        throttledFunction();
+        throttledFunction();
+        t.equal(executionCount, 1);
+        setTimeout(() => {
+            throttledFunction();
+            throttledFunction();
+            t.equal(executionCount, 2);
+            t.end();
+        }, 0);
+    });
+
+    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();
+});