Question

I’m trying to fetch posts dynamically using AJAX and JQuery by checking if the user is close to the bottom. Serverside is in python on GAE.

Listening for scroll:

this.config.window.on('scroll',this.loadContent);

1.Checking for distance from bottom

2.Sending an ajax request with the number of current posts in order to retrieve the next 10

3.results.check = true means that the server has no further posts to send.

    loadContent: function(){
        // 1
        if($(document).height() - $(window).height() - $(window).scrollTop() < 1000) {
            var posts = $('.troll').children('div').length;
            data = 'loadmore=True&offset=' + posts;   //2
            $.ajax({               
                url: '/',
                type: 'POST', 
                data: data,
                dataType: 'json',
                success: function(results){
                    if (results.check === 'true'){  //3 
                        $(window).unbind('scroll');
                        return;
                    }
                    Post.insert10Values(results);
                }
            });
        };
    },

    insert10Values: function(results){
        var update = Handlebars.compile($('#troll10').html()),
            troll10update = update(results);

        $('div.troll').append( troll10update );
    }

The problem here is that when scrolling fast, two or more requests are sent to the server and i get duplicate entries. I want to rate-limit on client-side.

Answer 1

Set a flag loading = false. Before you send a request, check the flag. If it’s false, set the flag to true and proceed with request, otherwise ignore the event. When results arrive, show them and set the flag back to false.