A tiny, simple jQuery plugin for sequential ajax requests.
600 bytes
minified and gzipped.promise
that matches the return type of the $.ajax API.View Project On Github Just the JavaScript, Please
Or using bower
bower install ajaxq
Using AjaxQ is easy. Add the plugin into your project, then instead of calling $.ajax(opts);
call $.ajaxq(name, opts);
Any requests added with the same queue name will be processed sequentially. It is possible to have more than one queue running in parallel by using different queue names. See the demo below to see two queues running together at the same time.
// See full $.ajax documentation. The only difference is the first parameter (the queue name). $.ajaxq ('MyQueue', { url: 'http://jsfiddle.net/echo/jsonp/', type: 'post', dataType: 'jsonp' });
// Provide a function to be executed at dequeue to retrieve options var data = { foo: 'bar' }; function getOpts() { return { url: 'path/to/your/resource', type: 'post', data: data }; } $.ajaxq ('MyQueue', getOpts);
// See full $.post documentation documentation. $.postq ('MyQueue', 'path/to/your/resource', onsuccess);
// See full $.get documentation documentation. $.getq ('MyQueue', 'path/to/another/resource', onsuccess);
// Returns boolean representing whether there are any requests running in any queue, or in the given queue, if provided $.getq ('MyQueue', 'path/to/another/resource', onsuccess); $.ajaxq.isRunning(); // Will return true since request just started. $.ajaxq.isRunning('NotMyQueue') // Will return false since the queue hasn't been added to. function onsuccess() { $.ajaxq.isRunning(); // Will return false since request is finished. }
// Returns the currently processing jqXHR for the given queue $.getq ('MyQueue', 'path/to/another/resource', onsuccess); var xhr = $.ajaxq.getActiveRequest('MyQueue'); xhr.abort(); // will abort the current request
// Clears queued requests in the given queue, without cancelling the current request $.getq ('MyQueue', 'path/to/another/resource', onsuccess); $.getq ('MyQueue', 'path/to/another/resource', onsuccess); $.getq ('MyQueue', 'path/to/another/resource', onsuccess); // Will clear future requests without cancelling the current one $.ajaxq.clear('MyQueue');
// Aborts the current request, and clears the current queued items in the given queue $.postq ('MyQueue', 'path/to/another/resource', onsuccess); $.postq ('MyQueue', 'path/to/another/resource', onsuccess); $.postq ('MyQueue', 'path/to/another/resource', onsuccess); // Will cancel the current request and clear future ones $.ajaxq.abort('MyQueue');
Click the buttons below to add requests onto two separate queues. Requests for this demo are generated using the jsFiddle echo API.
AjaxQ was developed by Foliotek, Inc. for use in Foliotek Presentation. It is licensed under the MIT License. See the LICENSE file.
You can find some more of our code and projects on our development blog.