Ejecución diferida vs. cíclica vs. "falsa cíclica" vs. cíclica condicionda

ejecucion-diferida-vs-ciclica-vs-falsa-ciclica-vs-ciclica-condicionda.markdown

Ejecución diferida vs. cíclica vs. "falsa cíclica" vs. cíclica condicionda

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<div id="contador">1</div>

script.js

let contador = 1;
const elementoContador = document.querySelector("#contador");

function subirContador() {
  contador += 1;
  elementoContador.innerHTML = contador;
}

// Ejecución diferida
setTimeout(subirContador, 1000);

// Ejecución cíclica

setInterval(function() {
  contador += 1;
  elementoContador.innerHTML = contador;
}, 1000);


// Ejecución "cíclica" (con setTimeout)

setTimeout(subirContador, 1000);
setTimeout(subirContador, 2000);
setTimeout(subirContador, 3000);
setTimeout(subirContador, 4000);
setTimeout(subirContador, 5000);

// Ejecución cíclica condicionada

let ciclo = setInterval(function() {
  if (contador === 10) {
    clearInterval(ciclo);
    return;
  }
  contador += 1;
  elementoContador.innerHTML = contador;
}, 1000);

style.css

#contador {
  text-align: center;
  font-size: 260px;
}