title: How to catch a state change event ONCE with history.js?
body: <p>I have an example code below where if you click the links, then use back and forward, each state change will cause more and more hits on the <code>statechange</code> event. Instead of the one that I expect.</p>
  <p>Links:</p>
  <ul>
  <li><a href="https://github.com/browserstate/history.js" rel="nofollow noreferrer">https://github.com/browserstate/history.js</a></li>
  <li><a href="http://docs.jquery.com/Downloading_jQuery" rel="nofollow noreferrer">http://docs.jquery.com/Downloading_jQuery</a></li>
  </ul>
  <p>Code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
      &lt;title&gt;History start&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Headline&lt;/h1&gt;
      &lt;hr&gt;
      &lt;div id=&quot;menu&quot;&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href=&quot;page-1&quot;&gt;Page 1&lt;/a&gt;
                  &lt;div style=&quot;display:none;&quot;&gt;
                      &lt;h2&gt;Page 1&lt;/h2&gt;
                      &lt;p&gt;Content 1&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=&quot;page-2&quot;&gt;Page 2&lt;/a&gt;
                  &lt;div style=&quot;display:none;&quot;&gt;
                      &lt;h2&gt;Page 2&lt;/h2&gt;
                      &lt;p&gt;Content 2&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div id=&quot;content&quot;&gt;
          &lt;h2&gt;Start page&lt;/h2&gt;
          &lt;p&gt;Paragraf&lt;/p&gt;
      &lt;/div&gt;
      &lt;script src=&quot;external/jquery-1.6.2.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;if ( typeof window.JSON === 'undefined' ) { console.log(&quot;Loaded json2&quot;); document.write('&lt;script src=&quot;external/json2.js&quot;&gt;&lt;\/script&gt;'); }&lt;/script&gt;
      &lt;script src=&quot;external/history.adapter.jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;external/history.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
      $(document).ready(function() {
          History.enabled = true;
  
          $('a').each(function() {
              $(this).click(function(e) {
                  e.preventDefault();
                  var $link = $(e.target),
                      state = {'href': $link.attr('href'), 'title': $link.html()},
                      $div = $link.siblings('div'),
                      content = $div.html();
  
                  $('#content').html(content);
  
                  History.pushState(state, state.title, state.href);
                  
                  return false;
              });
          });
          
          History.Adapter.bind(window, 'statechange', function() {
              var State = History.getState();
              // remove double hit on event
              console.log(State);
  
          });
  
      });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>