Question

i’m doing something of the sort of an infinite gallery. my OnScroll function detects if the scroll resides 100px from the bottom of the page, when it is, an ajax call is preformed and i’m appending the output to a div.

the problem is that the closeToBottom function is too quick so it sometimes captures the
scroll 100 pixels from the bottom twice or even 4-5 times before the scroll kicks back upwards.

How do i make the closeToBottom more subtle so my ajax call would be called only once
at a time and the scroll would immediately kick upwards?

function onScroll(event) {
    // Check if we're within 100 pixels of the bottom edge of the browser window.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom) {

        $.ajax({

                url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset,
                cache: false
        }).done(function( html ) {
            offset = offset + numberposts;
            $("#tiles").append(html);


        });
}

Answer 1

You could introduce a variable which you set when an ajax request is running and only start anotherone when none other is running. Like so:

var ajaxLoading = false;
function onScroll(event) {
    // Check if we're within 100 pixels of the bottom edge of the browser window.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom && !ajaxLoading) {
        ajaxLoading = true;
        $.ajax({

                url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset,
                cache: false
        }).done(function( html ) {
            offset = offset + numberposts;
            $("#tiles").append(html);
            ajaxLoading = false;

        });
}