001. Temporizadores (setTimeout & setInterval)

En estos capítulos vamos a trabajar con la programación asíncrona, o entender como funciona la asincronía en Javascript. Es muy importante entender lo que son los temporizadores. Javascript tiene funciones que nos van a permitir lanzar otras acciones después de haber pasado cierto tiempo o en una n cantidad de veces.

Hay una manera de poder ejecutar a posteriori funciones y ciertas acciones en Javascript, y es mediante los temporizadores.

Existen dos temporizadores que son los que vamos a utilizar a lo largo de los siguientes capítulos:

  • setTimeout(): recibe una callback (función que va a ejecutar) y recibe un tiempo expresado en milisegundos. Y se ejecuta únicamente una vez.
  • setInterval(): recibe un callback al igual que setTimeout(), pero se ejecuta indefinidas veces.

setTimeout()

Veamos un ejm de sintaxis del método setTimeout().

      console.log("Inicio setTimeout()");
      setTimeout(() => {
        console.log("Ejecutando un setTimeout(), esto se ejecuta
        una sola vez");
      }, 1000);

setInterval()

Veamos un ejm de la función setInterval() para ver su sintaxis.

      console.log("Inicio setInterval()");
      setInterval(() => {
        console.log("Ejemplo de setInterval(), se ejecuta infinitas veces");
      }, 1000);

De esta manera podríamos imprimir en la consola un reloj, de la siguiente forma.

Ejm

      setInterval(() => {
        console.log(new Date().toLocaleTimeString());
      }, 1000);

Funciones que cancelan

Existen dos funciones que cancelan estas dos funciones.

clearTimeout()

Esta función cancela a la función setTimeout(). Para que esta función funcione, la función setTimeout() hay que guardarla en una variable, de la siguiente forma.

Ejm

      let temporizador = setTimeout(() => {
        console.log("Ejm de setTimeout()");
      }, 1000);
     
      clearTimeout(temporizador);

clearInterval()

Esta función cancela a la función setInterval(). Al igual que con clearTimeout(), hay que guardar setInterval() en una variable, y llamar a la función clearInterval() que como parámetro recibe el nombre de la variable. Veamos su sintaxis.

Ejm

      let temporizador = setInterval(() => {
        console.log("Ejm de setTimeout()");
      }, 1000);

      clearInterval(temporizador);
      console.log("Después del clearInterval()");
Scroll al inicio