javascript - 使用后退和前进按钮快速导航时如何防止加载多个 View

Question

我正在开发一个 Web 应用程序，用户可以在使用 AJAX 加载的不同页面(或“部分 View ”)之间导航。我这样做是为了当用户按下浏览器中的后退和前进按钮时，应用程序根据地址栏当时包含的 url 返回正确的 View 。

我的问题:当我通过按浏览器中的后退和前进按钮缓慢导航时，它会正常工作。但是，当我重复按后退或前进按钮时，它会在应用程序中加载多个 View 。

我的问题:有没有办法防止在应用程序中加载多个 View ，而只加载应该加载的 View ？

我的代码:

$(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");
    }
}

Answer 1

在下面的部分

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

    return this;
},

将.append()更改为.html()。这将防止多余的内容填充更多空间，但完全替换 #ContentArea 的 html。

就像 Parth 所说，您还应该中止正在运行的 Ajax 请求并启动一个新请求。这不会阻止服务器向您发送结果，因此最好在发送新请求时也取消服务器上的所有旧请求。