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历史/状态API（Firefox，Chrome）的浏览器中，这种方式完美无瑕。在加载或重新加载特定URL或单击事件时，该函数执行其工作。

在IE中它也可以工作（带有散列），但是当我重新加载页面（例如example.com/#/test）时，第一个以及第二个'getContent（）'函数。因此在Firefox中，重新加载会触发onload事件警报，但在IE中会触发onload事件和click事件警报。

我需要的是一种结构化代码或逻辑检查以防止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()。

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

这不是一个很好的解决方案，无法弄清楚History.js插件发生了什么，但我没有经验，所以我不能说为什么IE会发射两个事件。

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

1 个答案: