Question

i made a “scroll down, fire ajaxrequest, load more content” function.

but for it to work properly, and not fire many times in succession because the user scrolls more before the ajax data is loaded into the document, i need to prevent firing more ajaxrequests if there is any ajaxrequests loading.

code:

$(document).scroll(function() {
var scrollBottom = $(document).height() - $(window).scrollTop();
if (scrollBottom < 3000) {
var offset = parseInt($("#offset").html()) + 10;
document.getElementById('offset').innerHTML = offset;
$.ajax({
   type: "POST",
   url: "/",
   data: "offset=" + offset <?=$ajaxextra?>,
   success: function(data){
   $("#mainContent").append(data);
  },
   error: function(e) {
    alert(e);
  }
 });
}
});

This is what i think i need, in pseudocode:

if (scrollBottom < 3000 && !ajax.isLoading())

How do people do this kind of thing?

Answer 1

Since maybe you can start many AJAX requests, I’d argue that one of best solutions – basically, a reliable solution – is first creating an array of requests’ state like this:

var ajaxRequestsState = [];

When you start an AJAX request, you should add an element to this array like this one:

ajaxRequestsState.push({ requestId: "some identifier" });

Later, if you need to check if there’s no active request, you can have a flag like so:

function isAsyncRequestActive() {
     return ajaxRequestsState.length > 0;
}

Finally, whenever a request ends or fails, you must do so:

function releaseRequest(requestId) {
    var requestIndex = 0;
    var found = false;

    while(!found && requestIndex < ajaxRequestsState.length)
    {
        found = ajaxRequestsState[requestIndex].requestId == requestId;
        requestIndex++;
    }

    if(found) {
        ajaxRequestsState.splice((requestIndex-1), 1);
    }
}

releaseRequest("identifier of request which ended or failed");

That’s simply tracking requests’ state and maintaining a collection of requests’ states, and you’ll have it!

*Edited!