22

Okay, the code below "works" in that when you scroll to the bottom of the page the AJAX function is fired and results are appended to the #postswrapper div on the page.

The issue is: if I scroll really quickly when I reach the bottom of the page, the AJAX fires several times and loads several sets of results into the #postswrapper div (number of additional, 'unwanted' results are determined by how many additional scroll events were fired by scrolling quickly).

Ultimately, I need only serve one set of results per time the user reaches the bottom. I've tried adding timers and such, but to no avail. It's obviously storing the additional scroll actions in the DOM and firing them in sequential order thereafter.

Any ideas?

I'm using jquery.1.4.4.js if that helps anybody. And e.preventDefault() doesn't work, in this situation, anyways.

$(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();
                }
            }
        });
    }
});
1
  • 1
    The unwanted result is that the 'loadmore.php' script gets executed several additional times when it's not necessary. I just need, for everytime the user reaches the bottom of the page, that chunk of code to run one(1) time, load the appropriate results via loadmore.php, and not load anything else until the user reaches the bottom of the page again.
    – Marc
    Aug 3, 2011 at 20:45

2 Answers 2

48

Try storing some kind of data that stores whether the page is currently loading new items. Maybe like this:

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

Right before the Ajax request is sent, a flag is cleared signifying that the document is not ready for more Ajax requests. Once the Ajax completes successfully, it sets the flag back to true, and more requests can be triggered.

8
  • 2
    Yeah buddy! I had a similar logic earlier, but you nailed it. Works like a charm. Cheers!
    – Marc
    Aug 3, 2011 at 20:50
  • Awesome hack, thanks! I combined both the code in questions and the answer to solve the same problem, thanks!
    – Hugo
    Jan 29, 2013 at 17:05
  • 1
    This is just beautiful.
    – pmandell
    Sep 20, 2013 at 1:06
  • 3
    You may use window.whatever = true as well.
    – bonyiii
    Oct 11, 2013 at 10:43
  • 1
    Excellent! Have been struggling with a similar issue.
    – Pringles
    May 30, 2014 at 15:36
0

Yeah, that works perfectly where you can create a variable to tell whether or not the ajax is currently fetching more data from the script so you know whether to send another ajax request yet or not. This makes the infinite scroll much more smooth and less glitchy so it wont fire a bunch of times at once when the user reaches the breakpoint.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.