Question

I have strange problem for which I can’t think of a solution. I have written some Javascript code to load some content through a AJAX call which also does some animation. To make the website functional I use jQuery with History.js. This is the script:

(function (window, undefined) {
    getContent(true); // Function that gets the initial content via AJAX and does some animation
                      // The parameter specifies that the call to the function is onload

    History.Adapter.bind(window,'statechange',function(event){ 
       getContent(); 
    });

    function getContent(onload){
       if(onload == true){
         // Do onload stuff. Only slightly differs from other event calls
         // If there is no state given define default one ie 'home'
         alert('onload event triggered'); // For debug purposes
       } else {
         // Do other event stuff
         alert('click event triggered'); // For debug purposes
       }
     }

    somelinks.on('click',a,function(){ // Setup some eventlisteners that push the state });

})(window);

In browsers that support the HTML5 History/State API (Firefox, Chrome) this works flawless. On a load or reload of a specific url or on a click event the function does its work.

In IE it also works (with hashes ofcourse), however when I reload a page (ie example.com/#/test) the first as well as the second ‘getContent()’ function. So in Firefox a reload triggers the onload event alert, but in IE the onload event and the click event alert are triggered.

What I need is a way of structering my code or a logical check to prevent IE from calling the second getContent(). I’ve searched for similar problems (keywords: IE, History.js, etc.) but nothing to be found.

Hope somebody can help me with the problem.

Answer 1

(function (window, undefined) {

    var getContentOK = true;

    getContent(true);

    History.Adapter.bind(window,'statechange',function(event){
       getContent(false);
    });

    function getContent(onload){
       if (getContentOK === true) {

           if(onload == true){
               // Do onload stuff. Only slightly differs from other event calls
               // If there is no state given define default one ie 'home'
               alert('onload event triggered'); // For debug purposes
           } else {
               // Do other event stuff
               alert('click event triggered'); // For debug purposes
           }

           getContentOK = false;
           setTimeout(function () {
               getContentOK = true;
           }, 500);
       }
     }

    somelinks.on('click',a,function(){ // Setup some eventlisteners that push the state });

})(window);

This will throttle the statechange event handler to only run getContent() once every 500ms.

Notice that I added some boolean flags, one to throttle the statechange event handler and one to mimic your onload variable. firstRun will output true on the first run and then false on each subsequent runs.

This is not as good a solution as figuring out what is happening with the History.js plugin but I have no experience with it so I can’t say why IE is firing two events.