javascript - 每次发生更改时，历史 api statechange 函数脚本都会重复函数调用

Question

我在一个简单的演示中使用 jquery 历史插件，每次单击导航项时都会加载到特定页面的一部分中，但我发现每次单击新链接时History.Adapter.bind(window, 'statechange', function()代码都会重复。每次代码在此函数内完成时是否可以取消绑定，或者任何人都可以建议我可能在哪里出错？

我的测试页面http://kylehouston.com/_testing/history/page1.html

JS

navLink.on('click', function(e) {

        e.preventDefault();

        var el = $(this);

        //get the href and remove begining /
        url = el.attr('href')
            .slice(1);

        //do a check to see if this link is already active
        if (el.hasClass('is-active')) {
            return false;
        }

        navLink.removeClass('is-active');
        el.addClass('is-active');


        History.pushState(null, null, url);


        // Bind to StateChange Event
        History.Adapter.bind(window, 'statechange', function() {
            var State = History.getState();

            mainContent.fadeOut(function() {
                $(this)
                    .empty();

                console.log('this ran');

                preloader.fadeIn();

                loadContent(mainContent, location.pathname);
            });

            History.Adapter.unbind();
        });


        //empty mainContent then empty it
        mainContent.fadeOut(function() {
            $(this)
                .empty();

            //display preloader
            preloader.fadeIn();

            //check if content already exists in pages{} if not then make call then save to pages{} or retrieve from pages{} if already exists
            loadContent(mainContent, url);
        });
    });

Answer 1

你试过移动吗

// Bind to StateChange Event
History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();

    mainContent.fadeOut(function() {
        $(this).empty();
        console.log('this ran');
        preloader.fadeIn();
        loadContent(mainContent, location.pathname);
    });           
});

前

navLink.on('click', function(e){