CODEWITHSUNDEEP
jqueryajax
Tom
Tom

Reputation: 9643

How to make .scrollTop not jumpy when making an .ajax call

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


        });
}

Upvotes: 1

Views: 266

Answers (1)

Andy
Andy

Reputation: 30135

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;

        });
}

Upvotes: 2

Related Questions