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只有当用户点击浏览器上的后退按钮时才会调用.这样可以解决问题,但我仍然不知道如何向前推进.假设这是罪魁祸首,我不知道.load在这个statechange事件中用什么代替那条线.

Answer 1

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

1. 将新状态推入堆栈
2. 状态改变事件触发
3. 该事件启动了一个负载data.home_page
4. loadHome叫做
5. loadHome启动负载

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

您可以绑定到该popstate事件吗？

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