Stop .ajax from double loading content

Question

I have the following code that loads content when a user scrolls to the bottom of the page. The problem is that if one scrolls too fast it double loads the content. What ways can I change my code to prevent this?

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
        $('div#ajaxResults').show();
        $.ajax({
            url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    $("#messages").append(html);
                    $('#ajaxResults').hide();
                }else{
                    $('#ajaxResults').html('<center>None.</center>');
                }
            }
        });
    }
});

I need for the solution to work multiple times. This script loads the next 5 messages, but there may be hundreds of messages that could be loaded. It is supposed to work in the same way that facebook or twitter loads updates.

going to be more than double... scroll event fires 100's of times a second, you need a caching mechanism — charlietfl
– charlietfl, Commented Mar 2, 2012 at 4:04

IIDenverII · Accepted Answer · 2012-03-03 22:03:29Z

1

SOLUTION:

$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
      var lastid = $(".postitem:last").attr("id");
        $('div#ajaxResults').show();
        $.ajax({
            url: "ajax/home.php?last_id=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    if(lastid == $(".postitem:last").attr("id")){
                    $("#messages").append(html);
                    $('#ajaxResults').hide();
                            }
                }else{
                    $('#ajaxResults').html('<center>None.</center>');
                }
            }
        });
    }
});

Add a variable that checks the lastid before the ajax is loaded, then only append html if the variable == the document last id. This way if ajax has already loaded, the two will not be equal and the update won't be posted.

answered Mar 3, 2012 at 22:03

IIDenverII

631 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tyler Over a year ago

worked for me, thank you. Awesome to find exactly the question you´re looking for. ;)

kendaleiv · Accepted Answer · 2012-03-02 02:55:16Z

0

Try adding $(this).unbind('scroll'); inside the if block, assuming you do not want the ajax request to run more than once. Don't put it in the $.ajax success callback though, since it may fire more than 1 ajax request this way.

http://api.jquery.com/unbind/

answered Mar 2, 2012 at 2:55

kendaleiv

5,8233 gold badges31 silver badges39 bronze badges

Comments

Sid · Accepted Answer · 2012-03-02 03:33:37Z

0

Can you set a variable that stores the timestamp it was called and if it's within a few milli-seconds then doesn't call again? Kind of hack-ish but might do the trick. Obviously this isn't really solving the problem as that seems to be with how the scroll event is being triggered.

answered Mar 2, 2012 at 3:33

Sid

7,6412 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

Stop .ajax from double loading content

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related