Problem mit Inhalt laden/History API

Question

so experimentierte ich mit dem Laden von Inhalten asynchron mit Hilfe von HTML5-History-API.

Das Problem, das ich habe, ist, dass, wenn ein <a href> angeklickt wird, die loadContent() Methode mehr als einmal aufgerufen wird, speziell wenn Sie durch mehr als eine Seite springen.

Dies macht die Seite langsamer, wenn Sie durch Links springen und es gibt mir auch Probleme mit bestimmten Dateien, die nicht mehr als einmal geladen werden sollten.

Hier ist der Code, den ich gerade benutze.

if (Modernizr.history) { 

    $(document).on("click", "a", function (event) { 
     event.preventDefault(); 
     _href = $(this).attr("href"); 

     history.pushState(null, null, _href); 

     loadContent("body", _href); 
    }); 

} else { 
    console.log("Browser does not support HTML5 History API. Please upgrade to a newer browser version."); 
} 

$(window).on("popstate", function() { 
    var link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only 
    loadContent("body", link); 
}); 

und die loadContent() Methode:

function loadContent(divId, href) { 
    $(divId).load(href); 
    console.log("Loading: " + href); 
}; 

Irgendwelche Ideen, was ich falsch mache? Sag mir, wenn du mehr erklären willst.

Vielen Dank für Ihre Aufmerksamkeit!

Answer 1

Wahrscheinlich ist die Ursache, dass, wenn Ihr Ankerelement geklickt wird, Code

history.pushState(null, null, _href); 

den Browser-History aktualisiert, was wiederum Pläne „popstate“ Ereignis nach aufgerufen wird, hat die aktuelle Prozedur Ausführung beendet. Deshalb haben Sie
loadContent();
zweimal aufgerufen werden.