Предотвращение вызова всех прошлых путевых точек jQuery при добавлении новых путевых точек

Question

Предотвращение вызова всех прошлых путевых точек jQuery при добавлении новых путевых точек

0

Я использую плагин jQuery Waypoints для динамической загрузки следующей статьи в серии, когда читатель приближается к концу текущей статьи. Таким образом, одна путевая точка запускает этот запрос ajax.

У меня также есть путевая точка, привязанная к каждому элементу оболочки статьи, которая запускает и то, и другое, когда статья приближается к верхней части экрана (при прокрутке вниз), и когда она появляется на полпути на экране (при прокрутке вверх) - эти функции обновляют заголовок и URL-адрес страницы в адресной строке.

Это все работает, но я нахожу, что, как только я получу несколько статей, когда обновляются путевые точки (как это происходит при добавлении новой путевой точки), все предыдущие путевые точки предыдущих статей запускаются, поэтому я могу быстро увидеть строку заголовка прогоняя все предыдущие заголовки /URL-адреса.

Я думал, что добавление continuous: false для .entry-wrapper точек .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>

Derek Hogue 21 фев. 2014, в 17:49

Источник

Теги:

javascript

jquery

jquery-waypoints

1 ответ

Ещё вопросы

Derek Hogue · Accepted Answer · 2014-02-22T19-53-00.000Z

Найдена моя ошибка: я добавлял связанные с историей путевые точки к каждой предыдущей записи каждый раз, когда была загружена новая запись ($('.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) }
});