frame-q ·

Promise based task scheduler that prevents overlapping of main tasks with microtasks and animation tasks and thus giving precise controll over the frame. Its 'add' method returns a promise that will resolve when the tasks reaches its turn in the tasks que. The return value of that task function is resolve value of the promise and if function returns a promise it will be resolve value. This hack lets comfortably redirect microtasks to requestAnimationFrame que.

See living example on ho-gi.com.

Easily helps preveting reflows

Really simple yet powerfull API:

• .add method: fq.add(function) covers almost all cases with its few powerfull options, like 'frameEnd', 'frameStart' and 'priority'
• .wait method: fq.wait(milliseconds) is substitute for setTimeout.
• .addAnimation: fq.addAnimation(function) is shortcut for .add with priority 'animation'

Installation

$ npm install frame-q

Usage

import fq from frame-q;

// to deal with reflows:

fq.add(() => {
  const el = document.querySelector('.el');
  return el.getBoundingClientRect();
}, frameEnd: true).then(rect = fq.add(() => {
  doSmth(rect);
}))
  
// to deal with microtasks: 
  
fq.add(() => {
  do smth;
  return another;
})
  .then(() => fq.add(() => somePromise))
  .then(() => fq.add(() => {
    do smthElse;
    return yetAnotherPromise
  }))
  .then(() => fq.add(() => {
    do smthFinal;
  }))

Documentation

Not ready yet.

Contributing

frame-q for sure needs more development and any suggestions including pull-requests are more than wellcome.

Inspiration

Frame-q was inspired by sob.js but is significantly different in almost every detail

License

Frame-q is MIT licensed. Copyright (c) 2018-2019 Pawel Przezwanski <http://ho-gi.com/>