在四个pushStates之后，History.js导致无限循环

Question

我正在学习History.js，我偶然发现了一个问题。我使用此函数将内容加载到块中：

loadPost: function(article) {
        Functions.foldAllBlocks();

        var url = article.attr('data-url'),
            content = article.find('.entry'),
            oldText = content.text(),
            blockPosition = article.offset().top,
            postTitle = article.find('h2').text();

        if(article.hasClass('expand')) {
            article.attr('data-entry',oldText);

            $.get(url, function (data) {
                article.addClass('collapse').removeClass('expand');

                var entry = $(data).find('.entry > *');
                content.html(entry);

                Functions.orderBlocks();

                Functions.maintainHistory(postTitle, url);

                $('body, html').animate({
                    scrollTop: blockPosition
                },200);
            });
        } else {
            article.addClass('expand').removeClass('collapse');

            content.text(article.attr('data-entry'));

            Functions.orderBlocks();

            Functions.maintainHistory(baseSitename, baseURL);

            $('body, html').animate({
                scrollTop: blockPosition
            },500);
        }
    }

这是为了维护我的历史状态：

maintainHistory: function(title, url){
        (function(window, undefined) {
            History.Adapter.bind(window, 'statechange', function() {
                var State = History.getState(),
                    cleanUrl = State.cleanUrl;

                if(cleanUrl === baseURL) {
                    Functions.foldAllBlocks();
                } else {
                    var article = $('h2 a[href="'+cleanUrl+'"]').closest('article');

                    Functions.loadPost(article);
                }
            });

            History.pushState({ page: title }, title, url);
        })(window);
    }

这两个函数是唯一使用History.js的函数。我的问题是--每一次，在第四次点击之后(因此，第四次点击loadPost和maintainHistory触发)，浏览器就会卡在最后两篇文章之间。

我可以做些什么来防止这种情况发生？

Answer 1

您的maintainHistory函数可以使用少量重写。按照现在的方式，History.Adaptor将堆叠成“状态变化”处理程序。绑定事件应该只发生一次，而不是每次调用该方法时都发生。试试这个：

    maintainHistory: (function(window, undefined) {
        console.log("Binding 'statechange' event - this should only happen once");
        History.Adapter.bind(window, 'statechange', function() {
            console.log("window.statechange event fired!");
            var State = History.getState(),
                cleanUrl = State.cleanUrl;

            if(cleanUrl === baseURL) {
                Functions.foldAllBlocks();
            } else {
                var article = $('h2 a[href="'+cleanUrl+'"]').closest('article');

                Functions.loadPost(article);
            }
        });

        // This is the function that is bound to maintainHistory
        // The wrapping function is self-executing, will only happen once, and 
        // creates a nice little closure for binding the "statechange" event
        return function(title, url) {
            console.log("maintainHistory was called with title", title, "and url", url);
            History.pushState({ page: title }, title, url);
        };

    })(window),

    nextPropertyInFunctions: function() { ...}