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

Question

Bien, el código siguiente "funciona" porque cuando se desplaza hacia la parte inferior de la página se activa la función AJAX y los resultados se anexan a #postswrapper div en el página.

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

En última instancia, solo necesito servir un conjunto de resultados cada vez que el usuario llega al final. He intentado agregar temporizadores y tal, pero fue en vano. Obviamente, almacena las acciones de desplazamiento adicionales en el DOM y luego las dispara en orden secuencial.

¿Alguna idea?

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 datos que almacene si la página está cargando actualmente nuevos elementos. Tal como esto:

$(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 la petición Ajax se envía, una bandera se aclaró que significa que el documento no está listo para más peticiones Ajax. Una vez que el Ajax se completa con éxito, establece la bandera en verdadero y se pueden activar más solicitudes.