Question

statechange事件中的这一行似乎是

$('#content').load(State.data.home_page);

...导致同一页面加载多次，导致我的网站出现故障。我该怎么做才能解决这个问题？

enter image description here

(function($) {

    function loadHome() {
        $('#content').load(site.url + '/ #primary', function() {
            $(this).fadeIn(50);
        });
    }

    // User event
    $('.site-title a').on('click', function(e) {
        e.preventDefault();

        var newData = { home_page: site.url + '/ #primary' };
        History.pushState(newData, site.title, site.url);
        loadHome();
    });

    // History event
    History.Adapter.bind(window, 'statechange', function(){
        var State = History.getState();
        $('#content').load(State.data.home_page);
    });

})(jQuery);

更新

好的，所以我了解到.pushState实际上会调用statechange。

基本上，我认为这就是发生的事情：

用户点击.site-title a
pushState()调用statechange来加载页面的一部分。
与此同时，还会调用loadHome()加载相同的内容。

我可以看到这就是我获取同一页面的多个实例的原因。我认为只有当用户点击浏览器上的后退按钮时才会调用statechange。这样可以解决问题，但我仍然不知道如何向前推进。我不确定在.load事件中替换statechange行的内容，假设这是罪魁祸首。

Answer 1

当您单击链接时，将按顺序执行以下操作：

您将新状态推入堆栈
状态更改事件触发
该事件会启动data.home_page
loadHome被称为
loadHome启动加载

如您所见，第3步和第5步是多余的。

您可以改为绑定popstate事件吗？

statechange load导致同一页面的多个加载

更新

1 个答案: