Подтвердить что ты не робот

JQuery Infinite Scroll - событие срабатывает несколько раз, когда прокрутка выполняется быстро

Хорошо, код ниже "работает" в том, что при прокрутке до нижней части страницы функция AJAX запускается, а результаты добавляются в div #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();
                }
            }
        });
    }
});
4b9b3361

Ответ 1

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

$(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, и может быть запущено больше запросов.