jQuery AJAX-request loading twice

Question

I'm building an infinite Scroll which fetches results from a database when the scroller hits the bottom of the page. It's all working fine except for one small thing; it is fetching the results twice if I scroll down fast, as if the function is executed twice.

Here is my jQuery code:

$(window).scroll(function () {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1];
        $('#loader').show();
        $.ajax({
            url: "ajax_loadmore.php?lCom=" + ID,
            success: function (result) {
                if(result) {
                    $('#moreComments').append(result);
                    $('#loader').hide();
                } else {
                    $('#loader').hide();
                }
            }
        });
    }
});

Javascript is somewhat single threaded; have you tried simply marking a flag to indicate an ajax request for content has been invoked and thus to simply exit? — Tejs
– Tejs, Commented Jul 10, 2012 at 14:05

Bojangles · Accepted Answer · 2012-07-10 14:10:09Z

4

Your AJAX requests are most likely queueing up behind one another, because they are asynchronous, even though JavaScript itself is mostly single threaded.

You can use the abort() method to make sure only one request runs at a time. You need to assign the jqXHR object returned by $.ajax() to a variable:

var request;

$(window).scroll(function () {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1];
        $('#loader').show();

        // Abort any currently executing request
        if(request) {
            request.abort();
        }

        // Make a new request
        request = $.ajax({
            url: "ajax_loadmore.php?lCom=" + ID,
            success: function (result) {
                if(result) {
                    $('#moreComments').append(result);
                    $('#loader').hide();
                } else {
                    $('#loader').hide();
                }
            }
        });
    }
});

abort() is a native function of the XMLHttpRequest object, however it is exposed by jQuery's jqXHR object, so can be called as usual.

answered Jul 10, 2012 at 14:10

Bojangles

102k50 gold badges175 silver badges209 bronze badges

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

2 Comments

Martin Forsstedt Over a year ago

Thnx! This helped. I did combine it with the answer below to get a faster result though. I do have another problem now and that is that it a'int working in Firefox for some reason.. It works in IE 9, Chrome and Safari.. any known jquery-problems with firefox?

Bojangles Over a year ago

Have you checked FF's debug console for errors (or Firebug's if you have it installed)?

Joram van den Boezem · Accepted Answer · 2012-07-10 14:25:32Z

0

As an addition to @JamWaffles answer:

You may just exit the function with return; instead of calling request.abort();. Otherwise you will make two AJAX requests for the same data = unnecessary load for your server. You should then, however, reset the request object with request = null; in the success and error callback.

PS. Would post this as a comment, but I can't.

answered Jul 10, 2012 at 14:25

Joram van den Boezem

1,10110 silver badges25 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX-request loading twice

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related