JSFiddle - React, Tailwind, and code Playground

by popsyjunior

HTML

<ul id='logger'>

</ul>

JavaScript

class AnimationRunner {
	constructor(animations) {
		this.animations = animations;
	}
  
  logOutput(output) {
  	const ul = document.getElementById('logger');
    const li = document.createElement('li');
    li.innerHTML = output;
    ul.append(li);
  }

	runAnimation() {
		return new Promise((resolve, reject) => {
			//Do the animation logic here..
			const animation = this.getNext();

			//Note, set timeout is just a simulation of a threaded or asynchronous implementation
			setTimeout(() => {
				if( this.hasNext() ) {
					resolve(true);
				} else {
					resolve('Animation Completed')
				}

				this.logOutput(`Finished job: ${animation.name}`);
			}, animation.time); //Simulate the animation by delaying with the time attribute..
		});
	}

	startRunner() {
		this.runAnimation().then((res) => {
			if( res === true ) {
				this.startRunner();
			} else {
				this.logOutput(res);
			}
		});
	}

	start() {
		this.startRunner();
	}

	hasNext() {
		return this.animations.length > 0;
	}

	getNext() {
		return this.animations.shift();
	}
}

const jobs = [
	{
		name: 'anim1',
		time: '2000',
	},
	{
		name: 'anim2',
		time: 4000,
	},
	{ 
		name: 'anim3',
		time: 7000
	}
];
const runner = new AnimationRunner(jobs);

runner.start();