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将与“statechange”处理程序相叠加。绑定您的事件应该只发生一次，而不是每次调用该方法。试试这个：

    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() { ...}

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

1 个答案: