JSFiddle - React, Tailwind, and code Playground

by alexb

JavaScript

class Timer {
	constructor(milliseconds) {
  	this.listenersByType = {};
    this.totalTicks = 0;
    setInterval(() => {
    	this.totalTicks++;
  		const listeners = this.listenersByType['tick'] || [];
      listeners.forEach(f => f({
      	timer: this,
        totalTicks: this.totalTicks,
      }));
    }, milliseconds);
  }
  
	addEventListener(type, listener) {
  	if (!this.listenersByType[type]) {
    	this.listenersByType[type] = [];
    }
    this.listenersByType[type].push(listener);
  }
}

const secondHand = new Timer(1000);
secondHand.addEventListener('tick', e => {
	document.body.innerHTML += `<div>${e.totalTicks % 2 ? 'Tick' : 'Tock'}. The clock started ${e.totalTicks} seconds ago.</div>`;
})