Tutorial: Usage

Usage

Importing

ESModules

import { Interval } from "oop-timers";

CommonJS

const { Interval } = require("oop-timers");

Replace Interval with Timeout if you need to import timeout type timer.

Real-world examples

These may not be the perfect examples. I'm no good at examples. Feel free to submit PR with better examples :)

Timeout

Imagine an Countdown timer app, where there is a Play button and Stop button. When timer is started we will replace Play button icon with icon representing restart action. Pressing it should restart the timer.

"Classic" code example

let timeout;
const startTimeout = () => {
    if (timeout) {
        clearTimeout(timeout);
    }
    timeout = setTimeout(onTimeEnd, 15 * 60 * 1000);
};

playButton.on("click", startTimeout);
stopButton.on("click", () => clearTimeout(timeout));

oop-timers code example:

const { Timeout } = require("oop-timers");
const timer = new Timeout(onTimeEnd, 15 * 60 * 1000);

playButton.on("click", () => timer.start());
stopButton.on("click", timer.stop);

Interval

We want to update the previous app to see how many seconds are left. Time to switch to Interval.

"Classic" code example

let interval;
let left;

const onTick = () => {
    left--;
    updateView(left);
    if (left === 0) {
        clearInterval(interval);
    }
};

const startInterval = () => {
    if (interval) {
        clearInterval(interval);
    }
    left = 15 * 60;
    interval = setInterval(onTick, 1000);
};

playButton.on("click", startInterval);
stopButton.on("click", () => clearInterval(interval));

oop-timers code example:

const { Interval } = require("oop-timers");

let left;

const onTick = () => {
    left--;
    updateView(left);
    if (left === 0) {
        clearInterval(interval);
    }
};

const timer = new Interval(onTick, 1000);

const startInterval = () => {
    left = 15 * 60;
    timer.start();
}

playButton.on("click", startInterval);
stopButton.on("click", timer.stop);

Important difference from setTimeout and setInterval

A timer.start() method has to be run in order to start the timeout/interval, as opposed to using native setTimeout/setInterval. This however can be changed with 3rd constructor argument, which defines if timer should start on constructing.

  • new Timeout(callback, 1000, true)
  • new Interval(callback, 1000, true)

Additional feature of Interval

One thing missing in native interval is an option to call the callback instantly, then wait specified time and call the callback and wait and call and wait ... It's not uncommon to find a code like that:

setInterval(checkForNotification, 5000);
checkForNotification();

With oop-timers you can use 4th constructor argument:

new Interval(checkForNotification, 5000, true, true);

3rd argument can still be false. Your callback will be instantly called on start and each restart.

Additional feature when restarting the timers

Both Timeout and Interval supports defining new time when (re)starting the timer.

let interval = 1000;
const increaseInterval = () => { interval -= 100; return interval; }
const decreaseInterval = () => { interval -= 100; return interval; }

const timer = new Interval(tick, interval, true);

plusButton.on("click", () => timer.start(increaseInterval()))
minusButton.on("click", () => timer.start(decreaseInterval()))

New time will be stored so next time you stop and start the timer without argument - last used time will be used for the timer.

Additional feature of Interval when restarting the timer

You can also override (this will be stored too) the call instantly on (re)start option when calling start method:

const timer = new Interval(tick, 1000, true, false);
// timer started without instant call
timer.start(undefined, true);
// callback will be instantly called then after each 1000ms

New time argument is skipped when undefined or null is passed (using undefined is preferred).

Methods and arguments list

Timeout

See Timeout

Interval

See Interval