ES6 generated-based job queue / job runner for the browser
ES6 generated-based job queue / job runner for the browser
Experimental
Say you've got a slow function (>250ms, e.g. heavy DOM manipulation etc), but you don't want to freeze up the browser to retain responsiveness. One way to achieve this is to break the function up into smaller chunks, and run them bit by bit by setTimeout.
function slowOperation () {
// Some work here. ..
setTimeout(function part1 () {
// Some more work here ...
setTimeout(function part2 () {
// Some more work here ...
setTimeout(function part3 () {
// Even some more work here ...
}, 100)
}, 100)
}, 100)
}
With aqueduct, you can write the following without splitting up your function and wrapping them in function () {}.
var conduit = aqueduct.create({
interval: 100,
});
conduit.push(function* slowOperation () {
yield part1();
yield part2();
yield part3();
});
conduit.start();
In this example, part2 will be executed after 100ms after part1 is completed.
An advantage of using aqueduct over setTimeout-based solution is that, you can pause the slow function by conduit.stop() and resume later conduit.start(), if you want to prioritize other processing.
One real world use case scenario is to loading heavy content in an infinite scrolling web page. To prevent janky scrolling, use conduit.push() to append the items to the DOM, and call conduit.pause() to when the user starts scrolling. But of course, you should try to optimize with the techniques in http://jankfree.org/ first. (See example/infinite-scroll.html)
Another example is to improve responsiveness of slider-based web page. When the user starts touching the slider, pause all other slow functions by conduit.pause to make sure touch events can be emitted 60 FPS. (See example/slider.html)
...
Since aqueduct relies on generator, you will have to transpile your ES6 code by something like Traceur and regenerator.
aqueduct is transpiled as index.js with regenerator with the runtime. You might to use the source file in src/aqueduct.js and pass everthing through the transpiler instead.
MIT