jQuery Infinite Scroll - event fires multiple times when scrolling is fast

Question

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

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 03 '11 at 20:45

score 48 · Accepted Answer · answered Aug 03 '11 at 20:45

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.

answered Aug 03 '11 at 20:45

Matt Bradley

4,127
17
11

2

Yeah buddy! I had a similar logic earlier, but you nailed it. Works like a charm. Cheers! – Marc Aug 03 '11 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 '13 at 17:05
Thank you, spend three hours trying to figure it out, but you saved my life! – Lukas Bijaminas Mar 01 '13 at 02:41
Its worked thanks , i have tested it with .on('scroll',scrollCall) – Leon Armstrong Jul 01 '13 at 03:55
1

This is just beautiful. – pmandell Sep 20 '13 at 01:06
3

You may use ```window.whatever = true``` as well. – bonyiii Oct 11 '13 at 10:43
1

Excellent! Have been struggling with a similar issue. – Koffeehaus May 30 '14 at 15:36
@MATT I say one thing, which already say some one you. I also love you (y). thanks – Abdul Rehman Dec 10 '16 at 11:52

jQuery Infinite Scroll - event fires multiple times when scrolling is fast

1 Answers1

Linked