Updated MM.Hash to throttle hash updates

Per @tmcw's request, MM.Hash now throttles hash updates (like Wax). This means less frequent hash.replace() calls, which should make it nicer to use on browsers (*cough* IE) that do stupid things like play clicking sounds whenever the URL changes. Also, removed standalone Hash implementation from examples/hash, and made sure that the map gets an initial center & zoom so that it doesn't redirect to #0/0/0 if loaded without a hash.
stamen · Jan 6, 2012 · 6174c5a · 6174c5a
1 parent 67cc268
commit 6174c5a
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 136 deletions.
diff --git a/examples/hash/index.html b/examples/hash/index.html
@@ -3,14 +3,14 @@
     <head>
         <title>ModestMaps JS: Hash URLs</title>
         <script type="text/javascript" src="../../modestmaps.js"></script>
-        <!-- <script type="text/javascript" src="modestmaps.hash.js"></script> -->
         <script type="text/javascript">
         var MM = com.modestmaps,
             map, hash;
 
         function initMap() {
             var provider = new MM.TemplatedMapProvider("http://acetate.geoiq.com/tiles/acetate/{Z}/{X}/{Y}.png");
             map = new MM.Map("map", provider);
+            map.setCenterZoom(new MM.Location(37.804, -122.252), 12);
             hash = new MM.Hash(map);
         }
 

diff --git a/examples/hash/modestmaps.hash.js b/examples/hash/modestmaps.hash.js
diff --git a/modestmaps.js b/modestmaps.js
@@ -1116,7 +1116,8 @@ var MM = com.modestmaps = {
             }
         },
 
-        onHashChange: function() {
+        movingMap: false,
+        update: function() {
             var hash = location.hash;
             if (hash === this.lastHash) {
                 // console.info("(no change)");
@@ -1125,16 +1126,31 @@ var MM = com.modestmaps = {
             var sansHash = hash.substr(1),
                 parsed = this.parseHash(sansHash);
             if (parsed) {
-                // console.log("parsed:", parsed.zoom, parsed.center.toString());
+                console.log("parsed:", parsed.zoom, parsed.center.toString());
                 this.movingMap = true;
                 this.map.setCenterZoom(parsed.center, parsed.zoom);
                 this.movingMap = false;
             } else {
-                // console.warn("parse error; resetting");
+                console.warn("parse error; resetting:", this.map.getCenter(), this.map.getZoom());
                 this.onMapMove(this.map);
             }
         },
 
+        // defer hash change updates every 100ms
+        changeDefer: 100,
+        changeTimeout: null,
+        onHashChange: function() {
+            // throttle calls to update() so that they only happen every
+            // `changeDefer` ms
+            if (!this.changeTimeout) {
+                var that = this;
+                this.changeTimeout = setTimeout(function() {
+                    that.update();
+                    that.changeTimeout = null;
+                }, this.changeDefer);
+            }
+        },
+
         isListening: false,
         hashChangeInterval: null,
         startListening: function() {

diff --git a/modestmaps.min.js b/modestmaps.min.js
diff --git a/src/hash.js b/src/hash.js
@@ -66,7 +66,9 @@
         },
 
         onMapMove: function(map) {
-            if (this.movingMap) {
+            // bail if we're moving the map (updating from a hash),
+            // or if the map has no zoom set
+            if (this.movingMap || this.map.zoom === 0) {
                 return false;
             }
             var hash = this.formatHash(map);
@@ -76,7 +78,8 @@
             }
         },
 
-        onHashChange: function() {
+        movingMap: false,
+        update: function() {
             var hash = location.hash;
             if (hash === this.lastHash) {
                 // console.info("(no change)");
@@ -90,11 +93,26 @@
                 this.map.setCenterZoom(parsed.center, parsed.zoom);
                 this.movingMap = false;
             } else {
-                // console.warn("parse error; resetting");
+                // console.warn("parse error; resetting:", this.map.getCenter(), this.map.getZoom());
                 this.onMapMove(this.map);
             }
         },
 
+        // defer hash change updates every 100ms
+        changeDefer: 100,
+        changeTimeout: null,
+        onHashChange: function() {
+            // throttle calls to update() so that they only happen every
+            // `changeDefer` ms
+            if (!this.changeTimeout) {
+                var that = this;
+                this.changeTimeout = setTimeout(function() {
+                    that.update();
+                    that.changeTimeout = null;
+                }, this.changeDefer);
+            }
+        },
+
         isListening: false,
         hashChangeInterval: null,
         startListening: function() {