tvanc / high-res-timeout

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

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