A Flight mixin for efficiently batching function calls into animation frames. Particularly useful for coalescing DOM updates.
bower install --save flight-with-batchHere's an example component that uses with withBatch.
var ToggleButton = flight.component(
withBatch,
function toggleButton() {
this.after('initialize', function () {
this.on('click', this.toggle);
// Use `this.batchify` to make a function that, when called, will batch a call to
// the name method you supply.
this.after('toggle', this.batchify('update'));
// Use `this.batch` to call a function when the browser is ready
this.batch(this.update);
});
this.toggle = function () {
this.isActive = !this.isActive;
};
this.update = function () {
this.$node.toggleClass('is-active', this.isActive);
};
}
);batch takes a function and calls it on the next animation frame using requestAnimationFrame (falling back to setTimeout if unavailable) with the context it was called with – most likely, this is the component instance.
Functions are added to a shared queue, so multiple component's batched calls will end up in the same queue.
batchify takes a string and makes a function that, when called, batch-es a call to the method named by the string.
batchify will throw if the method name you supply does not exists when batchify is called.
Development of this component requires Bower to be globally installed:
npm install -g bowerThen install the Node.js and client-side dependencies by running the following commands in the repo's root directory.
npm install & bower installTo continuously run the tests in Chrome during development, just run:
npm run watch-testAnyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.