Looper

What is it ?

Looper is a small library to provide a helpfull wrapper around window.requestAnimationFrame. It is develop with Ecmascript 2015 module system to be compliant with the next javascript spec. You should use a transpiler, like Babel to use it for production.

How it works ?

Install

With npm

npm install --save @thmsdmcrt_/looper

With yarn

yarn add @thmsdmcrt_/looper

Basic Usage

Here is a simple exemple of the use of Looper class :

'use strict'
import { Looper } from '@thmsdmcrt_/looper'

// Create a new instance of Looper.
const looper = new Looper()

// Create a method to call in looper.
function doSomething () {
  console.log('looper is running...')
}

// Add doSomething() to the looper instance. Save it to a variable to remove it later.
const addedDoSomethingMethod = looper.add(doSomething) // { remove : function() {} }
// Remove the doSomething() from loop call stack.
addedDoSomethingMethod.remove()

// Start the looper
looper.start()

// Get the looper status. return booleen
const isLooperRunning = looper.isRunning()

// Stop the looper instance. Here with a setTimeout
looper.stop()

// Clear the looper instance.
looper.dispose()

Alternatively, you could set a duration to the loop :

'use strict'
import { Looper } from '@thmsdmcrt_/looper'

const looper = new Looper()

// It will stop automatically after 2000 milliseconds.
// Hooks are optionals and outside the actions calls. 
// They are automatically removed at the end of the loop.

looper.start(2000, {
  onStart () {
    // When the loop start. Called before the first requestAnimationFrame
  },
  onUpdate (progress) {
    // You can get the current progress and do some logic with it when the loop is running. Called each frame.
  },
  onStop () {
    // When the loop finish. Called after the first requestAnimationFrame
  }
})

Debug

The Looper class come with a debug option. It warns you when the Actions call stack take more than one frame.

new Looper({debug: true})

// If the frame is longer than 16ms (based on the window.perfromance API)
> 'The Looper instance callstack actions is to heavy, framerate budget exceeded.'

Testing with Mocha

To run the tests, please execute npm test.

Build

To build, please run npm run build.

Test Server

With the help of Budo, the devDependencies provide a simple test server. It uses the browser.test.js. Please run npm run test:server.

Contributing

Please, see CONTRIBUTING.md file.

Licence

Please, see LICENCE file.