jQuery AJAX Queue

jquery.ajax.queue.example.js

/**
 * HOW-TO
 */

// same param as $.ajax(option); see http://api.jquery.com/jQuery.ajax/
$.ajaxQueue.addRequest(option); 

// start processing one by one requests
$.ajaxQueue.run();

// stop at actual position @TODO use .pause() instend
$.ajaxQueue.stop(); 

//delete all unprocessed requests from cache
$.ajaxQueue.clear(); 

jquery.ajax.queue.js

/**
 * Plugin for using queue for multiple ajax requests.
 *
 * @autor Pavel Máca
 * @github https://github.com/PavelMaca
 * @license MIT
 */

(function($) {
    var AjaxQueue = function(options){
        this.options = options || {};
        
        var oldComplete = options.complete || function(){};
        var completeCallback = function(XMLHttpRequest, textStatus) {
       
            (function() {
                oldComplete(XMLHttpRequest, textStatus);
            })();
           
            $.ajaxQueue.currentRequest = null;
            $.ajaxQueue.startNextRequest();
        };
        this.options.complete = completeCallback;
    };

    AjaxQueue.prototype = {
        options: {},
        perform: function() {
            $.ajax(this.options);
        }
    }

    $.ajaxQueue = {
        queue: [],

        currentRequest: null,

        stopped: false,

        stop: function(){
            $.ajaxQueue.stopped = true;

        },

        run: function(){
            $.ajaxQueue.stopped = false;
            $.ajaxQueue.startNextRequest();
        },

        clear: function(){
            $.ajaxQueue.queue = [];
            $.ajaxQueue.currentRequest = null;
        },

        addRequest: function(options){
            var request = new AjaxQueue(options);
            
            $.ajaxQueue.queue.push(request);
            $.ajaxQueue.startNextRequest();
        },

        startNextRequest: function() {
            if ($.ajaxQueue.currentRequest) {
                return false;
            }
           
            var request = $.ajaxQueue.queue.shift();
            if (request) {
                $.ajaxQueue.currentRequest = request;
                request.perform();
            }
        }
    }
})(jQuery);

I have been using this code for some time and recently updated it to an ES6 module. Hopefully someone will find it useful.

 * ES6 Module for queuing multiple ajax requests.
 *
 * @author Pavel Máca / Converted to es6 by Adrian Dybwad
 * @github https://github.com/PavelMaca
 * @license MIT
 */

import $ from "jquery";
var queue = [];
var currentRequest = null;
var stopped = false;

class AjaxQueueTask {
    constructor(options, requestComplete) {
        this.options = options || {};
        var oldComplete = options.complete || function(){};
        var completeCallback = function(XMLHttpRequest, textStatus) {
            (function() {
                oldComplete(XMLHttpRequest, textStatus);
            })();
			//Let the AjaxQueue know to run the next task. 
            requestComplete();
        };
        this.options.complete = completeCallback;
	}
	
    perform() {
        $.ajax(this.options);
    }
}

class AjaxQueue {
    constructor(options) {
		//Not yet used. For the future, some queue master options?
        this.options = options || {};
    }

    stop(){
        stopped = true;

    }

    run(){
        stopped = false;
        this.startNextRequest();
    }

    clear(){
        queue = [];
        currentRequest = null;
    }

    addRequest(options){
		//When the task is complete, it needs to tell the AjaxQueue so we can run the next task
        const requestComplete = () => {this.requestComplete()};
        var request = new AjaxQueueTask(options, requestComplete);
        
        queue.push(request);
        this.startNextRequest();
    }

	requestComplete() {
        currentRequest = null;
        this.startNextRequest();
	}

    startNextRequest() {
		//If the queue is stopped or a request is in progress, do nothing.
        if (stopped || currentRequest) {
            return false;
        }
       
        var request = queue.shift();
        if (request) {
            currentRequest = request;
            request.perform();
		}
    }
}

export default new AjaxQueue;

/**
 * HOW-TO
 */

import ajaxQueue from "./jquery.ajax.queue.es6";

// same param as $.ajax(option); see http://api.jquery.com/jQuery.ajax/
ajaxQueue.addRequest(option); 

// start processing one by one requests
ajaxQueue.run();

// stop at actual position @TODO use .pause() instend
ajaxQueue.stop(); 

//delete all unprocessed requests from cache
ajaxQueue.clear();