JSFiddle - React, Tailwind, and code Playground

by Dmitry Luzanov

HTML

<div class="result"></div>

Babel + JSX

const result = document.querySelector('.result')

const exercises = [{
	time: 1000,
  sleep: 100,
  name: 'ex1',
  $do: str => result.innerHTML += `ex1: ${str}<br>`
}, {
	time: 300,
  name: 'ex2',
  $do: str => result.innerHTML += `ex2: ${str}<br>`
}, {
	time: 5000,
  sleep: 5000,
  name: 'ex3',
  $do: str => result.innerHTML += `ex3: ${str}<br>`
}, {
	time: 2000,
  name: 'ex4',
  $do: str => result.innerHTML += `ex4: ${str}<br>`
}]

const doExercise = (exs, exNumber = 0) => {
	const currentEx = exs[exNumber]
  currentEx.$do('start')
  
  const doIt = setTimeout(() => {
  	if (exNumber === exs.length - 1) currentEx.$do(`end after ${currentEx.time}ms && all exercises done`)
    else currentEx.$do(`end after ${currentEx.time}ms && sleep... (${currentEx.sleep || 0}ms)`)

    if (exs[exNumber + 1]) {
      const nextEx = setTimeout(() => {
        doExercise(exs, exNumber + 1)
      }, currentEx.sleep || 0)
    }
  }, currentEx.time) 
}

doExercise(exercises)