Limit concurrent jQuery ajax requests to at most 3 at a time, and queue the rest.

AjaxQueue.js

var ajaxReqs = 0;
var ajaxQueue = [];
var ajaxActive = 0;
var ajaxMaxConc = 3;
function addAjax(obj) {
    ajaxReqs++;
    var oldSuccess = obj.success;
    var oldError = obj.error;
    var callback = function() {
        ajaxReqs--;
        if (ajaxActive === ajaxMaxConc) {
            $.ajax(ajaxQueue.shift());
        } else {
            ajaxActive--;
        }
    }
    obj.success = function(resp, xhr, status) {
        callback();
        if (oldSuccess) oldSuccess(resp, xhr, status);
    };
    obj.error = function(xhr, status, error) {
        callback();
        if (oldError) oldError(xhr, status, error);
    };
    if (ajaxActive === ajaxMaxConc) {
        ajaxQueue.push(obj);
    } else {
        ajaxActive++;
        $.ajax(obj);
    }
}

thanks for this, it helped me fix an issue with almost 2000 queued AJAX requests, don't ask why:wink:

Thanks mate. Very helpful in time of need.

Hi all, anyone can explain these code for what propose?

if (oldSuccess) oldSuccess(resp, xhr, status);
if (oldError) oldError(xhr, status, error);

or how can I use addAjax()?

These lines are for executing the success/error callbacks you provided.

Sample use of this gist:

addAjax({
    'url': 'http://example.org/'
    'method': 'POST', // default 'GET'
    'data': {'foo': 'bar', 'baz': 'qux'}
    'success': function () { console.log('success'); },
    'error': function () { console.log('error'); },
});

That's it. Actually it's just the same as $.ajax().

Much simplicity. wow.

I think there is a error in code.
In this line
if (ajaxActive === ajaxMaxConc)
should be check queue is empty
I changed to
if (ajaxActive === ajaxMaxConc && ajaxQueue>0)
And works better

(yes a reply to an old post, perhaps someone can use it in the future).

The fix mentioned also does not work for my. The original one fires more requests then I add and no longer works when I re-add at a later moment. The fix only does a single "batch" then stops.

For me it works like this:

    function addAjax(obj) {
        ajaxReqs++;
        const originalSuccessCallback = obj.success;
        const originalErrorCallback = obj.error;
        const callback = function () {
            ajaxReqs--;
            ajaxActive--;

            if (ajaxQueue.length > 0 && ajaxActive < ajaxMaxConc) {
                ajaxActive++;
                $.ajax(ajaxQueue.shift());
            } else {
                ajaxActive--;
            }
        }

        obj.success = function (resp, xhr, status) {
            callback();
            if (originalSuccessCallback) originalSuccessCallback(resp, xhr, status);
        };
        obj.error = function (xhr, status, error) {
            callback();
            if (originalErrorCallback) originalErrorCallback(xhr, status, error);
        };

        if (ajaxActive === ajaxMaxConc) {
            ajaxQueue.push(obj);
        } else {
            ajaxActive++;
            $.ajax(obj);
        }
    }

• The mistake in the original code is that it doesn't check if ajaxQueue still contains elements. If at some point ajaxQueue gets empty, the code ends up with a (harmless) no-op $.ajax(undefined), and importantly, ajaxActive isn't decremented, which leads to various issues.
• Your fixed code has a mistake, there is an extraneous ajaxActive--;. You may either:
  • Remove the "else" branch having the ajaxActive--;
  • Remove the first ajaxActive--;, and the ajaxActive < ajaxMaxConc and the ajaxActive++; (when callback() triggers a new request, the number of active requests stays the same)
• ajaxActive cannot exceed ajaxMaxConc, and this is ensured when addAjax() is called. Therefore it is irrelevant to check it in callback().
• Btw, notice the ajaxReqs variable is useless.

Considering the above points, I ended up with the following code for callback():

    var callback = function () {
        if (ajaxQueue.length > 0) {
            $.ajax(ajaxQueue.shift());
        } else {
            ajaxActive--;
        }
    }