Question

当读者接近当前文章的末尾时，我正在使用jQuery Waypoints plugin动态加载系列中的下一篇文章。所以一个航点触发了ajax请求。

我还有一个附加到每篇文章的包装元素的路标点，当文章接近屏幕顶部时（向下滚动时）和当它到达屏幕中间时（向上滚动时）都会触发 - 这些功能更新地址栏中页面的标题和URL。

这一切都有效，但我发现一旦我收到几篇文章，当航点刷新时（就像你添加一个新的航点时一样），所有以前的文章的航点被触发，所以我可以看到标题栏快速浏览所有以前的标题/网址。

我认为向continuous: false航点添加.entry-wrapper会修复它（来自文档;：“如果为false，只有在它是最后一个航路点时才会触发。”），但是，唉，它没有。

有什么想法吗？代码如下：

/*
    Load the next entry via AJAX when we near the end of each entry 
*/
$('.load-trigger').waypoint(
    function()
    {
        url = $('.load-next:last').data('url');
        if(url)
        {
            $.get(url, function(data)
            {
                /*
                    We only want the content    
                */
                entry = $(data).find('.entry-wrapper').hide();
                /*
                    Add it to the DOM   
                */
                $('.content').append(entry);
                /*
                    Fade-in 
                */
                $(entry).fadeIn(500, function()
                {
                    /*
                        When scrolling down, push a new history state when the new entry reaches the top of the window  
                    */
                    $('.entry-wrapper').waypoint(function(direction)
                    {
                        if(direction === 'down')
                        {
                            history.pushState('', $(this).data('title'), $(this).data('url'));
                            document.title = $(this).data('title');
                        }
                    },
                    {
                        continuous: false,
                        offset: '100px'
                    });
                    /*
                        When scrolling back up, push a new history state when the previous entry is filling roughly half of the window
                        (see offset)
                    */
                    $('.entry-wrapper').waypoint(function(direction)
                    {
                        if(direction === 'up')
                        {
                            history.pushState('', $(this).data('title'), $(this).data('url'));
                            document.title = $(this).data('title');
                        }
                    },
                    {
                        continuous: false,
                        offset: function(){ return ($(this).height() * -1) + ($.waypoints('viewportHeight') / 2) }
                    });
                });
            });
        }
    },
    {
        offset: '120%'
    }
);

简化标记：

<div class="content">
    <div class="entry-wrapper" data-title="Foo baz bar" data-url="http://foo.bar/bing>
        ...
        <div class="load-next" data-url="http://foo.bar/baz"></div>
    </div>
</div>
<div class="load-trigger"></div>

Answer 1

发现我的错误：每次加载新条目时，我都会将与历史相关的航点添加到每个上一个条目（$('.entry-wrapper').waypoint(function(direction)...）。相反，我需要具体：

/*
    When scrolling down, push a new history state when the new entry reaches the top of the window  
*/
$(entry).waypoint(function(direction)
{
    if(direction === 'down')
    {
        history.pushState('', $(this).data('title'), $(this).data('url'));
        document.title = $(this).data('title');
    }
},
{
    continuous: false,
    offset: '100px'
});
/*
    When scrolling back up, push a new history state when the previous entry is filling roughly half of the window
    (see offset)
*/
$(entry).waypoint(function(direction)
{
    if(direction === 'up')
    {
        history.pushState('', $(this).data('title'), $(this).data('url'));
        document.title = $(this).data('title');
    }
},
{
    continuous: false,
    offset: function(){ return ($(this).height() * -1) + ($.waypoints('viewportHeight') / 2) }
});

防止在添加新航点时调用所有过去的jQuery航点

1 个答案: