Skip to content

dafky2000/TimedQ.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TimedQ.js

Javascript timed processing queue (and queue manager). Useful as a non render blocking processing queue in the browser to eliminate jank in animations and page elements.

A simple queue manager to call batches of functions and data in timed blocks. The amount of data to be processed is self adjusted based on the function call time. The primary goal is to provide an easy to use, non render blocking processing queues so the browser does not lock up during large tasks with very little overhead. There is certainly a better way to explain this...

jsfiddle

DISCLAIMER

This library is still experimental, under very active development and not ready for production use. I am working on it :) Please feel free to contribute! This is my first OSS project so please bear with me as I learn the ropes!

Assumptions / Requirements

  • ES6
  • Your processing function doesn't take longer than the runtime

TODO

  • Unit testing
  • API Documentation
  • Benchmarking
  • Investigate web workers
    • Is it superior to TimedQ.js, or is TimedQ.js redundant?
    • Can we make TimeQ.js better by using web workers?

Include in your project

Add to the head tag in your project

<script src="//rawgit.com/dafky2000/TimedQ.js/master/TimedQ.js"></script>

Initialize & start TimedQ

Initializes and starts the queue manager, checks every 100ms (configurable with idletime) until items are enqueued.

Using (optional) options ('sane' defaults shown below)

const Q = new TimedQ({
  runtime: 40,    // How long to process items before taking a break
  breaktime: 1,   // How long to break between processing blocks
  idletime: 100,  // How long to wait between processing blocks if there was nothing to process
});

TimedQ.prototype.enqueue(signature, data, options)

(required) signature: Typically a function which is used as the identifier for the queue group as well as the function to call on the dataset. Otherwise it could be another string, int, float, object reference... whatever can be used as a Map() key but you will need to define a callback in the options if not a function.

(required) data: 2-dimensional array of parameters to supply to function.

(optional) optional: { callback: function(param1, param2...) {}, }

Queue items to be run

Queue an inline function to run on a set of data

Q.enqueue(function(param1, param2) { console.log(param1 + param2); }, [
  ['data for param1','data for param2'],
  ['more data for param1','more data for param2'],
  ['even more data for param1','even more data for param2'],
]);

Queue a defined function

function fun(param1, param2) {
  console.log(param1 + param2);
}

Q.enqueue(fun, [
  ['data for param1','data for param2'],
  ['more data for param1','more data for param2'],
  ['even more data for param1','even more data for param2'],
]);

Queueing data to a specific queue name

Q.enqueue('my_queue1', [
  ['data for param1','data for param2'],
  ['more data for param1','more data for param2'],
  ['even more data for param1','even more data for param2'],
], {
  callback: function(param1, param2) {
    console.log(param1 + param2);
  },
});

About

Javascript timed processing queue (and queue manager). Useful as a non render blocking processing queue in the browser to eliminate jank in animations and page elements.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published