bootstrap - jQuery Infinite Scroll: el evento se dispara varias veces cuando el desplazamiento es rápido

isotope infinite scroll

Question

De acuerdo, el código a continuación "funciona" porque cuando se desplaza a la parte inferior de la página, la función AJAX se activa y los resultados se agregan a la división #postswrapper en la página.

El problema es: si me desplazo muy rápido cuando llego al final de la página, el AJAX se dispara varias veces y carga varios conjuntos de resultados en el div #postswrapper (el número de resultados adicionales "no deseados" está determinado por cuántos desplazamientos adicionales los eventos se activaron desplazándose rápidamente).

En última instancia, solo necesito presentar un conjunto de resultados por vez que el usuario llegue al final. He intentado agregar temporizadores y cosas así, pero en vano. Obviamente, se almacenan las acciones de desplazamiento adicionales en el DOM y se activan en orden secuencial a partir de entonces.

¿Algunas ideas?

Estoy usando jquery.1.4.4.js si eso ayuda a alguien. Y e.preventDefault () no funciona, en esta situación, de todos modos.

$(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();
                }
            }
        });
    }
});

Answer 1

Intente almacenar algún tipo de información que almacene si la página está cargando nuevos elementos. Tal vez así:

$(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);
            }
        });
    }
});

Justo antes de que se envíe la solicitud Ajax, se borra una marca que indica que el documento no está listo para más solicitudes Ajax. Una vez que el Ajax se completa con éxito, establece el indicador en verdadero, y se pueden activar más solicitudes.