setTimeout() y setInterval() en Javascript (eventos de intervalo de tiempo)

Los "timing-events" ejecutan un pedazo de código en un intervalo de tiempo específico.

Estos métodos son accesibles desde el objeto Window dentro del DOM(Document Object Model).

setTimeout()

El método global setTimeout() establece un temporizador que ejecuta una función o una porción de código después que trascurre el tiempo establecido.

Sintaxis

El primer parámetro es una función callback a ser ejecutada. La función puede pasarse como parámetro pero también puede declararse directamente una función anónima (funciones de flecha son perfectas para esto, revisalo en mi post).

El segundo parámetro indica el número de milisegundos a trascurrir antes de la ejecución de la función.

Opcionalmente, podemos especificar parámetros después de los milisegundos y estos serán accesibles a esta función.

setTimeout() retorna un número entero positivo que representa el ID del temporizador creado. De modo opcional, podemos usar una variable para almacenar el ID en caso de que queramos cancelar el temporizador utilizando el método clearTimeout().

window.setTimeout(function, milisegundos,parametro,parametro2 ... );

Ejemplo de uso

/* Después de 3 segundos se imprimirá en la consola
 el mensaje "Este es un uso de setTimeout" */
setTimeout(() => {
    console.log("Este es un uso de setTimeout");
},3000);

clearTimeout()

El método clearTimeout() termina la ejecución de la función que especifiquemos en nuestro setTimeout() si la ejecutamos antes de que termine el tiempo de intervalo declarado.

Este método solo acepta un parámetro que es el timeoutID que es devuelto por setTimeout() cuando lo guardamos en una variable.

Sintaxis

let myTimeout = setTimeout(function, milisegundos);
clearTimeout(myTimeout);

Ejemplo de uso

/*Empieza una cuentra atras de un segundo 
y en seguida imprime 'Evento de cuenta atras' por consola*/
 <button onclick="myTimeout = setTimeout(() => console.log('Evento de cuenta atras'),1000)">Empezar</button>

/* Si se hace clic antes de 1 segundo, 
se cancela la ejecución de la función declarada en el setTimeout()*/
    <button onclick="clearTimeout(myTimeout)">Parar</button>

setInterval()

Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.

Si uso y sintaxis es exactamente igual que el método setTimeout();

Ejemplo de uso

// Esta vez probemos pasar parametros a nuestra función de flecha.
let idIntervalo = setInterval((param1,param2) => {
    console.log(param1 + param2);
},1000,'Esto es un',' método setInterval()');

clearInterval()

El método clearInterval() termina la ejecución de la función que especifiquemos en nuestro setInterval() si la ejecutamos antes de que termine el tiempo de intervalo declarado.

Sintaxis

let myInterval = setInterval(function, milisegundos);
clearInterval(myInterval);

Ejemplo de uso

<button onclick="myTimeout = setInterval(() => console.log('Evento de cuenta atras'),1000)">Empezar</button>

<button onclick="clearInterval(myTimeout)">Parar</button>