ngQueue
ngQueue is an AngularJS module that helps you to handle routine sync/async queue task in AngularJS with ease.Demo
Getting started
Include the ngQueue module with AngularJS script in your page.<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://pc035860.github.io/ngQueue/ngQueue.min.js"></script>
Add
ngQueue
to your app module's dependency.angular.module('myApp', ['ngQueue']);
Install with Bower
bower install ngQueue
then import the module with
<script>
tag.Install with NPM
npm install ng-queue
then
import
/require
the module somewhere in your entry point file.Usage
$queueFactory(limit, deferred)
limit
- The maximum concurrent task for the queue. Default value1
.deferred
- Iftrue
, queued tasks are padded with a very small time interval, allowlling the browser to update UIs or respond to user interactions. Default valuefalse
. More aboutdeferred
option.
Start with
$queueFactory
to create a queue you'll be working with.// Create a queue with concurrent task quota of 2
var queue1 = $queueFactory(2);
// Create a deferred queue
var queue2 = $queueFactory(1, true);
Now you are ready to play with
Queue
instance APIs.Queue instance APIs
enqueue(fn, context, args)
Enqueue atask(fn)
with specified context(optional)
and arguments(optional)
. Returns a task handle for you to remove the task from the queue before it gets dequeued with remove
.The task can be either asynchronous or synchronous.
Synchronous tasks work just like usual function call.
//////////////////////
// synchronous task //
//////////////////////
queue.enqueue(function (inA, inB, inC) {
console.log(this); // {name: "context"}
console.log(inA, inB, inC); // hello world !
doSomething();
}, {name: 'context'}, ['hello', 'world', '!']);
Return an $q promise in the task function to make it asynchronous.
///////////////////////
// asynchronous task //
///////////////////////
// $timeout delay
queue.enqueue(function () {
var dfd = $q.defer();
$timeout(function () {
dfd.resolve();
// or dfd.reject()
}, 100);
return dfd.promise;
});
// $http request
queue.enqueue(function () {
return $http.get('/some/api/call')
.success(function () {
// do something if success
})
.error(function () {
// do something if error
});
});
remove(taskHandle)
Remove a task from the queue before it gets dequeued.taskHandle
is what returned by enqueue()
.clear()
Clear the queue.dequeue()
Try to dequeue manually. In most cases, the queue will handle all the dequeue works itself.The deferred
queue
Here's a nice reading by Nicholas C. Zakashttp://www.nczonline.net/blog/2013/07/09/the-case-for-setimmediate/
The basic idea of the
deferred
option of $queueFactory
is to utilize setImmediate()
API to ease the browser freezing problems which we sometimes encountered when dealing with heavy-load tasks. Though it's not implemented on every browser, if you kindly provide a polyfill, we're still good.In the condition that
ngQueue
can't find the setImmeidate()
API, it'll use $timeout
of AngularJS instead.