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.
Add ngQueue
to your app module's dependency.
angular;
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 2var queue1 = ; // Create a deferred queuevar queue2 = ;
Now you are ready to play with Queue
instance APIs.
Queue instance APIs
enqueue(fn, context, args)
Enqueue a task(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;
Return an $q promise in the task function to make it asynchronous.
///////////////////////// asynchronous task ///////////////////////// // $timeout delayqueue; // $http requestqueue;
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.
deferred
queue
The Here's a nice reading by Nicholas C. Zakas
http://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.