ticker-js

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 update event is when any measurement or calculations should occur.
• The render event is when the results of any measurements are applied to the DOM.

Installation

Install via npm:

$ npm i ticker-js --save

API

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.