jQuery Nieskończony Scroll - zdarzenie wyzwala wiele razy podczas przewijania jest szybki

Question

Dobra, poniższy kod „działa”, że podczas przewijania na dole strony funkcja AJAX jest zwolniony, a wyniki są dołączane do div #postswrapper w sprawie strona.

Problem polega na tym, że jeśli przewijam się bardzo szybko po dotarciu do dolnej części strony, AJAX strzela kilka razy i ładuje kilka zestawów wyników do div #postswrapper (liczba dodatkowych, "niechcianych" wyników jest określana przez ile dodatkowych zdarzeń przewijania zostało wystrzelonych przez szybkie przewijanie).

Ostatecznie muszę służyć tylko jeden zestaw wyników za czas użytkownik osiągnie dno. Próbowałem dodawać timery i takie, ale bez skutku. Oczywiście przechowywanie dodatkowych czynności przewijania w DOM i wypalanie ich w kolejności sekwencyjnej po tym.

Wszelkie pomysły?

Używam jquery.1.4.4.js jeśli pomaga nikomu. I e.preventDefault() nie działa, w tej sytuacji, tak czy inaczej.

$(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

Spróbuj zapisać jakieś dane, które przechowują informacje o tym, czy strona aktualnie ładuje nowe produkty. Może tak:

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

Tuż przed żądania Ajax jest wysyłany, flaga jest czyszczony co oznacza, że ​​dokument nie jest gotowy do większej liczby żądań AJAX. Gdy Ajax zakończy się pomyślnie, ustawia flagę z powrotem na true i można wywołać więcej żądań.