Running multiple simultaneous requestAnimationFrame
loops causes a noticeable performance hit, so this utility manages multiple rAF
functions while keeping your code clean and modular. It also includes an rAF
polyfill.
let FrameRunner = require('helios-frame-runner')
let frameRunner = new FrameRunner()
frameRunner.add('draw', drawFunction)
frameRunner.add('draw2', drawFunction2)
All function accept two signatures:
frameRunner.add({ id: 'functionId', f: function, type: 'everySecond' })
frameRunner.remove({ id: 'functionId', f: function })
frameRunner.check({ id: 'functionId' })
is equal to
frameRunner.add('functionId', function, 'everySecond')
frameRunner.remove('functionId', function, 'everySecond')
frameRunner.check('functionId')
The type
argument is optional in both signatures and defaults to everyFrame
. The only other value for type
at this time is everySecond
, which will call the function once every sixty frames.
If you need to verify that a function has been added to the framerunner (ie to make something idempotent), call check()
:
frameRunner.check({ id: 'myFunction', type: 'everyFrame' })
frameRunner.check('myFunction')
add()
returns a destroyer function, which you can call to remove the function you added.
var destroyer = frameRunner.add({ id: 'short-lived', f: function })
destroyer()
frameRunner.check({ id: 'short-lived' }) // => false
frameRunner.check('short-lived') // => false
You can also remove that function by its ID:
frameRunner.remove({ id: 'short-lived' })
frameRunner.remove('short-lived')
You can manually start and stop the rAF
loop:
frameRunner.start()
frameRunner.stop()
Framerunner will console log all its actions if you pass { debug: true }
when instantiating it, ie
let frameRunner = new FrameRunner({ debug: true })
You can get a framecount (as an integer) using frameRunner.frameCount()
.
add({ id: '', function: f(), type: 'everyFrame' })
add( id, f, type )
Add a function to the frame runner. Starts the rAF loop. Returns a destroyer function.
Options:
-
id
: string to identify your function -
f
: the function you’d like run every second or frame -
type
: (optional, default everyFrame)'everySecond'
or'everyFrame'
-
autostart
: (optional, default true) start therAF
loop automatically
remove({ id: '', function: f(), type: 'everyFrame' })
remove( id, f, type )
-
id
: string ID of function to remove -
type
: (optional, default everyFrame) 'everySecond' or 'everyFrame'.
check({ id: '', type: ''})
check( id, type )
-
id
: string ID of function to check -
type
: (optional, default everyFrame) 'everySecond' or 'everyFrame'.
Starts the rAF
loop.
Stops the rAF
loop.
Returns the frame count.
Clone repo, run npm install
. Edit src/main.js
. Running npm run build
will compile the versions you see in the root directory. npm test
will run unit tests, using Ava.