JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<button id="pause">Pausar</button>
<button id="start">Start</button>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

CSS

div{
  width: 300px;
  height: 150px;
  margin-top: 1em;
  margin-bottom: 1em;
  display: none;
}

button{ cursor: pointer;}

#one{ background: red;}
#two{ background: blue;}
#three{ background: green;}

JavaScript

//Função para mostrar o elemento
function display(id){
   document.getElementById(id).style.display = 'block';
} 

//Função que esconde todos os elementos pela tagname
function hideAll(){
   var divs = document.getElementsByTagName("div");
   for (var i = 0; i < divs.length; i++) {
       divs[i].style.display = 'none';        
   }
}

//Timer. Recebe o ID do elemento e o tempo de delay
function timer(id, delay){
   setTimeout(function(){
       display(id); 
   }, delay);
}


var time = setInterval(function(){ 
     //chama o primeiro elemento DIV com 1 segundo
     timer("one",1000);
     //chama o segundo elemento DIV com 1 segundo e meio
     timer("two", 1500);
     //chama o terceiro elemento DIV com 2 segundos.
     timer("three",2000);
     //esconde todos os elementos
     hideAll();
  }, 2500);
  
  //Função de Click do button
  document.getElementById("pause").addEventListener("click", function(e) {
  e.preventDefault();
  //para o setInterval()
  clearInterval(time);
  alert("Parou o loop");
});

document.getElementById("start").addEventListener("click", function(e){
	e.preventDefault();
  //recarrega a página sem o cache do navegador
  location.reload(true);
  alert("Aperte OK para iniciar loop");
});