jQuery Infinite Scroll - событие запускается несколько раз при быстрой прокрутке - PullRequest
Новая
       2

jQuery Infinite Scroll - событие запускается несколько раз при быстрой прокрутке

21 голосов
/ 04 августа 2011

Хорошо, приведенный ниже код «работает» в том смысле, что при прокрутке до нижней части страницы запускается функция AJAX, и результаты добавляются к элементу #postswrapper на странице.

Проблема в том, что если я прокручиваю очень быстро, когда достигаю нижней части страницы, AJAX запускается несколько раз и загружает несколько наборов результатов в div #postswrapper (количество дополнительных, «нежелательных» результатов определяется тем, многие дополнительные события прокрутки были вызваны быстрой прокруткой).

В конечном счете, мне нужно только обслуживать один набор результатов, когда пользователь достигает дна. Я пытался добавить таймеры и тому подобное, но безрезультатно. Очевидно, он хранит дополнительные действия прокрутки в DOM и запускает их в последовательном порядке.

Есть идеи?

Я использую jquery.1.4.4.js, если это кому-нибудь поможет. И e.preventDefault () не работает, в любом случае, в этой ситуации. 

$(window).scroll(function(e) {
    e.preventDefault();
    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
        $('div#loadmoreajaxloader').show();
        $.ajax({
            cache: false,
            url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'),
            success: function(html) {
                if (html) {
                    $('#postswrapper').append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html();
                }
            }
        });
    }
});

1 Ответ

46 голосов
/ 04 августа 2011

Попробуйте сохранить какие-либо данные, которые хранят информацию о том, загружает ли страница в настоящее время новые элементы. Может быть так: 

$(window).data('ajaxready', true).scroll(function(e) {
    if ($(window).data('ajaxready') == false) return;

    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
        $('div#loadmoreajaxloader').show();
        $(window).data('ajaxready', false);
        $.ajax({
            cache: false,
            url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'),
            success: function(html) {
                if (html) {
                    $('#postswrapper').append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html();
                }
                $(window).data('ajaxready', true);
            }
        });
    }
});

Прямо перед отправкой Ajax-запроса, флаг сбрасывается, показывая, что документ не готов к дополнительным Ajax-запросам. Как только Ajax завершает работу успешно, он устанавливает флаг обратно в true, и может быть запущено больше запросов.

...