pc035860 / ngqueue

ngQueue is an AngularJS module that helps you to handle routine sync/async queue task in AngularJS with ease.

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 value 1.
• deferred - If true, queued tasks are padded with a very small time interval, allowlling the browser to update UIs or respond to user interactions. Default value false. More about deferred 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 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.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. 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.

ngqueue's Issues

Error in package.json

ngQueue/package.json

Line 5 in 536f6d1

"main": "ngQeueu.min.js",

instead of "main": "ngQueue.min.js"

Easy way to know when a given queue is started or finished

I have a loop that pushes $http requests into a queue and the queue then runs waiting for each to finish before moving to the next which is fantastic. Upon starting this queue I open a toastr on the page so the user knows something is happening in the background and then have some code in the success of each $http call that looks like this

if(i+1 === importJSON.length){
    toastr.clear($scope.importToast);
}

This just checks to see if it's on the last ajax call for this given array being looped over and if it is, on success will clear the toast. It works but this feels clunky to me and I'm curious if there is a way not documented to listen to when a given queue has completed.

I tried watching the queue API instance but it didn't log anything at all

Async promises.

I'm trying to make http requests purely sequential. No new request goes out until the previous one has returned. I thought this plugin would help with that, but the network panel shows that the second request is going out before the first one has returned. Did I misunderstand the application of this plugin?

  var writeQueue = $queueFactory();
  $scope.updateItem = function (item) {
    writeQueue.enqueue(function () {
      return InventoryR.update(null, item,  // InventoryR is a $resource class
        function () {}, //success
        function () {} //error
      );
    });
  };

Where is the npm package?

Hello you might noticed that bower was deprecated, thus you probably should upload this in npm for easing the package download :)
The company I'm working for is using this package and we're migrating away from bower.

I appreciate your work making this awesome lib 🥇

remove async task does not remove the proper task

Hi there!

I've ran into an issue when trying to remove async tasks from the queue. When searching the index in the queue for the task to remove, it always leads to a negative index due to the fact that the enqueue function does not return the same object as it stores. (probably should push the task object in line 63).

That being said, it would also be nice to have a security check before splicing the queue array.

Thanks for your work!
Have a nice day,
Gauthier