Question

I implemented a load function which is getting triggered whenever one reaches end of the page. It’s working basicly, but the event gets triggered numerous times, whenever I scroll down. is there a better way to implement this idea or a way to not trigger this event numerous times?

Here’s what I did:

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $.get("test", function(data){
             $("div.article:last").after(data);
});
            loading = false;

        }
    }
});
   $(document).ready(function() {
    $('#loaded_max').val(500);
});

Thank you!

Answer 1

You do this:

$.get("test", function(data){
    $("div.article:last").after(data);
});
loading = false;

The loading=false; is outside your $.get callback function. The $.get is a async function which means. loading=false;is executed directly after your $.get and not when your Ajax call is ready.

If you put your loading=false; inside your $.get callback. You won’t have multiple requestst at the same time.

Solution to get only 1 request at a time:

$.get("test", function(data){
    $("div.article:last").after(data);
    loading = false;
});

Also I would start loading the next part of the page like 400px before people reach the bottom. So they can keep on scrolling and don’t have to wait for your request to be ready. I’ts more smooth that way.