Skip to content

Timer

Timer is based on window.requestAnimationFrame instead of setInterval. It can tick at any defined interval, and is fast, efficient, and non-blocking.

Instantiate

ts
function timer(interval?: number): Timer;

Returns

ts
class Timer {
    /**
     * The count increments with each interval.
     *
     * @protected
     */
    protected $count: number;
    /**
     * The requestAnimationFrame handle number.
     *
     * @protected
     */
    protected $handle?: number;
    /**
     * The number of milliseconds that define an interval.
     *
     * @public
     */
    readonly interval: number;
    /**
     * The timestamp of the last loop.
     *
     * @protected
     */
    protected $lastLoop?: number;
    /**
     * The date the timer starts.
     *
     * @protected
     */
    protected $startDate?: Date;
    /**
     * Construct the timer.
     *
     * @public
     */
    constructor(ms?: number);
    /**
     * Get the number of times the timer has ticked.
     *
     * @public
     */
    get count(): number;
    /**
     * The `elapsed` attribute.
     *
     * @public
     */
    get elapsed(): number;
    /**
     * The `elapsedSinceLastLoop` attribute.
     *
     * @public
     */
    get elapsedSinceLastLoop(): number;
    /**
     * Determines if the Timer is currently running.
     *
     * @public
     */
    get isRunning(): boolean;
    /**
     * Determines if the Timer is currently stopped.
     *
     * @public
     */
    get isStopped(): boolean;
    /**
     * Get the last timestamp the timer looped.
     *
     * @public
     */
    get lastLoop(): number;
    /**
     * Set the last timestamp the timer looped.
     *
     * @public
     */
    set lastLoop(value: number);
    /**
     * Get the date object when the timer started.
     *
     * @public
     */
    get started(): Date | undefined;
    /**
     * Resets the timer. If a callback is provided, re-start the clock.
     *
     * @public
     */
    reset(fn?: (timer: Timer) => void): Timer;
    /**
     * Starts the timer.
     *
     * @public
     */
    start(fn?: (timer: Timer) => void): Timer;
    /**
     * Stops the timer.
     *
     * @public
     */
    stop(fn?: (timer: Timer) => void): Timer;
}

Usage

ts
import { timer } from 'flipclock';

const instance = timer(100);

instance.start(() => {
    console.log('started')
});

instance.stop(() => {
    console.log('stopped')
});

instance.reset(() => {
    console.log('reset')
});

Released under the MIT License.