High Res Timeout

A high-resolution, object-oriented replacement for setTimeout() and setInterval(). Good for animations, progress indicators, carousels, you name it.

Installation

npm install --save-dev high-res-timeout

Usage

Simple timeout

import HighResTimeout from "high-res-timeout"
const timeout = new HighResTimeout(250)

Repeating timeout (setInterval)

import HighResTimeout from "high-res-timeout"
const interval = new HighResTimeout(250, true)

Lifecycle callbacks

As a Promise

timeout
    .start()
    .then(() => console.log("I am complete!"))
    .catch(() => console.log("I've been stopped!"))

Events

timeout.start()
    .on('complete', () => console.log('I am complete!'))
    .on('stop', () => console.log("I've stopped!"))
    .on('start', () => console.log("I've started!"))
    .on('reset', () => console.log("I've been reset!"))
    .on('tick', () => {
    	console.log(`I'm ${(timeout.progress * 100).toFixed(0))}% done`)
    });

Methods and properties

Instance methods

| Method | Chainable | Description | | ---------- | --------- | ----------------------------------------------------------------------------------------------------- | | start() | ✓ | Starts the timeout. Takes into account time elapsed between previous calls to start() and stop(). | | stop() | ✓ | Stops the timeout. | | reset() | ✓ | Resets the timeout. | | complete() | ✓ | Completes the timeout as if it had completed organically. | | then() | ✗ | Attach a callback that will be called when the timeout completes. Returns a Promise. |

Instance properties

| Property | Readable | Writable | Description | | -------- | -------- | -------- | -------------------------------------------------------------------------------- | | duration | ✓ | ✓ | Get/set timeout duration. | | progress | ✓ | ✗ | Float between 0 and 1 indicating how much of the timeout's duration has elapsed. | | running | ✓ | ✗ | Whether the timeout is currently counting down. |

Development

Use the following commands to perform code coverage after each change and to open a Browsersync tab to the coverage reports.

npm run watch
npm run serve