I am working on a web application where the user can navigate between different pages (or 'partial views') which are loaded in with AJAX. I made it so when the user presses the back and forward button in the browser that the application returns the correct view depending on the url the adress bar contains on that moment.

My problem: When I navigate slowly by pressing the back and forward button in the browser it works like normal. But when I repeatedly press the back or forward button it loads multiple views within the application.

My question: Is there a way to prevent multiple views from loading in the application and only load the view which is supposed to load?

My Code:

$(window).on("popstate", function (e) {
    $(".UserNavigation li").removeClass("active");
        LoadContent.init();
    })

    var LoadContent = {
    init: function (url, query) {

        var Content = { }
        var PathName;

        if (url == null) {
            PathName = window.location.pathname;
            Content.url = "ContentArea/" + PathName;
        }    
        else {
            var Controller = "ContentArea/"
            Content.url = Controller + url
        }            

        if (query)
            Content.query = query       

        LoadContent.Loading(this);

        xhr = $.ajax({
            type: "POST",
            url: Content.url,
            data: { query: Content.query, type: 0 },
            success: function (data) {  

                LoadContent.ApplyContent(data);

            },
            error: function () {

            },
            complete: function (data) {
                if (url != null)
                    LoadContent.UpdateHistory(data, url);
            }
        })
    },

    ApplyContent: function (data) {
        $("#ContentLoading").animate({
            opacity: 0
        }, 200, function () {
            $("#ContentLoading").addClass("hidden");
            $("#ContentArea").append(data).addClass("visible");
            LoadContent.UpdateMenu();
        })

        return this;
    },

    Loading: function () {
        $("#ContentArea").children().remove();
        $("#ContentLoading").removeClass("hidden");
        $("#ContentArea").removeClass("visible");
        $("#ContentLoading").animate({
            opacity: 1
        }, 200)
    },

    UpdateHistory: function (data, url) {
        var DataToSave = {
            StateURL: url,
        }

        history.pushState(DataToSave.StateURL, url, url)
    },

    UpdateMenu: function () {
        var CurrentPath = window.location.pathname;
        $(".UserNavigation li").removeClass("active");
        $("[href='" + CurrentPath + "']").parent().addClass("active");
    }
}