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

Question

看来statechange 事件中的这一行：

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

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

(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 仅在用户单击浏览器上的后退按钮时才被调用。这样就可以解决问题了，但是我仍然不知道如何继续前进。我不确定在statechange 事件中用什么替换.load 行，假设这是罪魁祸首。

Answer 1

当您单击链接时，会按顺序发生以下情况：

1. 您将新状态推送到堆栈中
2. 状态更改事件触发
3. 事件启动data.home_page的加载
4. loadHome 被调用
5. loadHome 启动加载

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

您能改为绑定到popstate 事件吗？

• https://html.spec.whatwg.org/#handler-window-onpopstate
• https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onpopstate