javascript - IE 在 ajaxified 网站上调用函数两次

Question

我有一个奇怪的问题，我想不出解决办法。我已经编写了一些 Javascript 代码来通过 AJAX 调用加载一些内容，该调用也执行一些动画。为了使网站功能正常，我将 jQuery 与 History.js 结合使用.这是脚本:

(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);

在支持 HTML5 History/State API(Firefox、Chrome)的浏览器中，这可以完美运行。在加载或重新加载特定 url 或单击事件时，该函数会执行其工作。

在 IE 中，它也可以工作(当然使用哈希)，但是当我重新加载页面(即 example.com/#/test)时，第一个和第二个“getContent()”函数。所以在 Firefox 中，重新加载会触发 onload 事件警报，但在 IE 中会触发 onload 事件和点击事件警报。

我需要的是一种构建代码的方法或逻辑检查以防止 IE 调用第二个 getContent()。我已经搜索过类似的问题(关键字:IE、History.js 等)，但没有找到。

希望有人能帮我解决这个问题。

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);

这将限制 statechange 事件处理程序每​​ 500 毫秒仅运行一次 getContent()。

请注意，我添加了一些 bool 标志，一个用于限制 statechange 事件处理程序，一个用于模拟您的 onload 变量。 firstRun 将在第一次运行时输出 true，然后在每次后续运行时输出 false。

这个解决方案不如弄清楚 History.js 插件发生了什么，但我没有这方面的经验，所以我不能说为什么 IE 会触发两个事件。