Javascript 使用“后退”和“前进”按钮快速导航时如何防止加载多个视图

我正在开发一个web应用程序，用户可以在使用AJAX加载的不同页面（或“部分视图”）之间导航。当用户按下浏览器中的“后退”和“前进”按钮时，应用程序会根据地址栏当时包含的url返回正确的视图

我的问题是：当我按下浏览器中的“后退”和“前进”按钮缓慢导航时，它会像正常一样工作。但当我反复按下后退或前进按钮时，它会在应用程序中加载多个视图

我的问题是：有没有办法防止在应用程序中加载多个视图，而只加载应该加载的视图

我的代码：

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

在您的案例中，ajax响应加载数据，所以如果您发送多个请求，会发生什么情况，当然ajax数据（视图）会替换旧的请求。所以您需要停止以前的ajax请求

ABOVE代码停止上一个ajax请求

在接下来的部分中

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请求并启动一个新的请求。这不会阻止服务器向您发送结果，因此在您发送新请求时，最好也取消服务器上的所有旧请求。

我在执行AJAX之前实现了此解决方案，因此它会在创建新的on之前中止任何活动调用，但它似乎不起作用，我仍然在应用程序窗口中塞满了两个视图。

 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;
},