javascript - can i check if ajax is currently loading?

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?

Chris Michaelides · Accepted Answer · 2013-09-23 19:24:07Z

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!

José P. Airosa · Accepted Answer · 2011-09-22 09:56:11Z

I would recommend the use of a flag.

The concept of a flag is to turn something on/off. In this case you could specify a global boolean (true or false) variable (more on Global Variables in JS). When you fire a given ajax request you turn that variable to true and when the ajax completes you turn it back to false. The only thing you need to do is check that global variable when you request any ajax request.

Taking into account your example:

// Global variable. It needs to be outside any function, you can make it the first line in your .js file. var isAjaxLoading = false; $(document).scroll(function() { var scrollBottom = $(document).height() - $(window).scrollTop(); if (scrollBottom < 3000 && !isAjaxLoading) { var offset = parseInt($("#offset").html()) + 10; document.getElementById('offset').innerHTML = offset; isAjaxLoading = true; $.ajax({ type: "POST", url: "/", data: "offset=" + offset <?=$ajaxextra?>, success: function(data){ $("#mainContent").append(data); isAjaxLoading = false; }, error: function(e) { alert(e); isAjaxLoading = false; } }); } });

Collectives™ on Stack Overflow

javascript - can i check if ajax is currently loading?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related