ticker-js v1.0.3
ticker-js
Event-emitting time keeper for browser friendly render cycles
Browser-based module that fires events at a given interval to facilitate interactions on a timeline. Tries to help facilitate measure/render grouping by firing two separate events at different moments in the process tick.
- The
updateevent is when any measurement or calculations should occur. - The
renderevent is when the results of any measurements are applied to the DOM.
Installation
Install via npm:
$ npm i ticker-js --saveAPI
All properties should be accessed via the getter and setter methods.
| method | params | description |
|---|---|---|
start | Starts the instance, firing its events | |
stop | Stops the instance, stopping events from firing | |
setFps | number: fps | Throttles the ticker to the passed value |
getFps | Returns the current fps setting as a number or null | |
isTicking | Returns boolean indicating if the instance is running | |
destroy | Destroys the instance, removing all listeners |
Events
All events pass the same event object defined below.
| event | description |
|---|---|
update | DOM measurements and calculations should occur when fired. |
render | DOM modification should occur when fired. |
Event object
The two events pass listeners an event object as defined below.
| type | name | description |
|---|---|---|
| @property {object} | data | event data object |
| @property {number} | data.fps | frames per second |
| @property {number} | data.trueFps | un-throttled frames per second |
| @property {number} | data.runtime | the total duration of the ticker while ticking |
| @property {number} | data.delta | time since last render |
| @property {number} | data.time | current lifespan of render cycle |
| @property {number} | data.now | current time |
Usage
Instantiate and attach any listeners.
var Ticker = require('ticker-js');
var ticker = new Ticker(30);
ticker.on('update', function (evt) {
// measure
});
ticker.on('render', function (evt) {
// render
});Instances do not auto-run.
You must call the start method for the events to begin firing.
ticker.start();Once running, the update and render events will begin firing at the ticker's fps interval.
If fps is unset, the ticker is not throttled, and will tick as close to 60 fps as possible.