ClockWorks

Using timers and intervals in the webworkers

Installation

You can install the package via npm:

npm i @reecem/clockworks

Or use jsDelivr:

	...
	<script src="https://unpkg.com/@reecem/clockworks?umd"></script>
    ...

If you are customising the styling and overriding it with your own styling then you will also need an instance of your css or a tailwindcss file installed as only the classes needed are packaged with clockworks

Usage

With ClockWorks you can create a new instance of it and specify an array of timers to install in the worker.

Each timer has a set of define values as an object and a callback. These definitions can be added at when instantiating the class or via the push/pull methods on the class once it has been created.

Simple Print to console clock that self terminates

/**
 * Create a new instance of the class and then print the time to the console.
 *
 * We will also remove the clock after 5 seconds, by counting a variable.
 */
let triggers = 0;
let clockWorks = new ClockWorks([
	{
		name: 'clock',
		time: 1000,
		callback: () => {
			console.log((new Date()).toLocaleString())
		}
	},
	{
		name: 'remove-clock',
		time: 1000,
		callback: () => {
			if (++triggers >= 5) {
				$clock.pull('clock')
				$clock.pull('remove-clock')
			}
		}
	}
])

The above example will print the time to the terminal, then it will remove itself and the timer printing the time to the console;

Web Worker

The package installs it's own Web Worker that has been bundled, so there is no need to worry about the specifics of the web worker or it conflicting with other workers that you may have on the webpage. See it here worker.js

Timer Definitions

The ClockWorks library takes a standard style of interval or timer definition, this allows it to track them to be able to clear them or add them.

{
	/**
	 * A unique name for the timer being created.
	 *
	 * This name is used to track the timer.
	 */
	name: 'Timer',
	/**
	 * The interval of the timer that should be firing in ms
	 */
	time: 1000,
	/**
	 * The callback function is fired when the timer or interval triggers.
	 */
	callback: () => {
		console.log((new Date()).toLocaleString())
	}
}

Pushing a Single Timer

To add a single timer you will use the instance of the class that you have created and call the push method with a timer object.

const clockWorks = new ClockWorks();

clockWorks.push({
	name: 'new-timer',
	time: 5000,
	callback: () => {
		console.log('New interval has fired at [%s]', (new Date()).toLocaleString());
	}
})

Important An error will be thrown when you try to add a timer with the same name twice to the same instance.

push Method

	/**
	 * Add timers to the list.
	 *
	 * @param {Object} timer
	 * @param {String} timer.name
	 * @param {Number} timer.time
	 * @param {Function} timer.callback
	 *
	 * @return {Number} the index of the timer on the stack
	 */
	push(timer)

Removing a Single Timer Instance

To remove a timer, you will use the name that you have defined when pushing it onto the timer stack.

const clockWorks = new ClockWorks();

// timer that has been defined
clockWorks.push({ name: 'new-timer', ... })

/**
 * Removing the timer you will use the name that you assigned the timer.
 */
clockWorks.pull('new-timer');

pull Method

	/**
	 * Remove timer from the stack
	 *
	 * @param {String} timer this is the timer name
	 */
	pull(timer)

Features

• [*] Installable Web Worker bundled
• [*] Multiple setIntervals Definable from the main class on construction
• [*] Individually add or remove a timer
• [ ] Have a fallback to the main page thread
• [ ] Allow defining timeout functions
• [ ] More definitions for the timers
• [ ] Hash IDs for the functions and definitions
• [ ] Improve management of timers.
• [ ] Cross tab session persistance ??

Testing

PENDING...

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker. You can also use the SECURITY doc.

Credits

• ReeceM
• All Contributors (Thanks to any who help)

Support

I enjoy building things and making all manner of programs and helping in open-source projects. If it has been really useful to you and you appreciate it you can leave a star on the repo.

If you have the means, a simple coffee would be also appreciated too.

License

The MIT License (MIT). Please see License File for more information.