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

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

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

в конечном счете, мне нужно только обслуживать один набор результатов за раз, когда пользователь достигает дна. Я пробовал добавлять таймеры и тому подобное, но безрезультатно. Очевидно, что он хранит дополнительные действия прокрутки в 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();
                }
            }
        });
    }
});
21
infinite-scroll jquery

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

45