Los programadores usan eventos de tiempo para retrasar la ejecución de cierto código, o para repetir código a un intervalo de tiempo específico.

Existen dos funciones nativas en la librería de JavaScript para lograr estas tareas: setTimeout() y setInterval().

setTimeout

setTimeout() es usada para retrasar la ejecución de la función pasada como argumento por un periodo de tiempo determinado.

Hay dos parámetros que se pasan a setTimeout(): la función que quieres llamar y el tiempo (expresado en milisegundos) a retrasar la ejecución de la función.

Recuerda que hay 1000 milisegundos (ms) en 1 segundo, entonces 5000 ms equivale a 5 segundos y así sucesivamente.

setTimeout() ejecutará la función del primer argumento una vez, tan pronto como haya transcurrido el tiempo especificado.

Ejemplo:

let identificadorTiempoDeEspera;

function temporizadorDeRetraso() {
  identificadorTiempoDeEspera = setTimeout(funcionConRetraso, 3000);
}

function funcionConRetraso() {
  alert("Han pasado 3 segundos.");
}

Cuando la función temporizadorDeRetraso es llamada, ejecutará setTimeout. Luego que pasen 3 segundos (3000 ms), ejecutará funcionConRetraso que mostrará una alerta.

setInterval

Usa setInterval() para hacer que una función se repita con un tiempo de retraso entre cada ejecución.

Una vez más, se pasan dos parámetros a setInterval(): la función que quieres llamar y el tiempo en milisegundos a retrasar cada ejecución de la función.

setInterval() continuará ejecutándose hasta que sea borrada.

Ejemplo:

let identificadorIntervaloDeTiempo;

function repetirCadaSegundo() {
  identificadorIntervaloDeTiempo = setInterval(mandarMensaje, 1000);
}

function mandarMensaje() {
  console.log("Ha pasado 1 segundo.");
}

Cuando tu código llama a la función repetirCadaSegundo, ejecutará setInterval. setInterval correrá la función mandarMensaje cada segundo (1000 ms).

clearTimeout y clearInterval

También existen funciones nativas correspondientes para detener los eventos de tiempo: clearTimeout() y clearInterval().

Como has podido observar, cada función de temporizador setTimeout() y setInterval(), en los ejemplos anteriores, han sido guardadas en una variable. Cuando alguna de estas funciones se ejecuta, le es asignada un número (identificador), el cual es guardado en dicha variable. Ten en cuenta que JavaScript hace todo esto en segundo plano.

El número generado es único para cada instancia de los temporizadores. Este número también es la manera como los temporizadores son identificados cuando quieres detenerlos. Por esta razón, deberás siempre asignar el temporizador a una variable.

Para que tu código sea entendible, deberías siempre emparejar:

  • clearTimeout() con setTimeout() y
  • clearInterval() con setInterval().

Para detener un temporizador, llama a la correspondiente función para borrarlo y pásale la variable identificadora que corresponde al temporizador que quieres detener. La sintaxis para clearInterval() y clearTimeout() son la misma.

Ejemplo:

let identificadorDeTemporizador;

function temporizadorDeRetraso() {
  identificadorDeTemporizador = setTimeout(funcionConRetraso, 3000);
}

function funcionConRetraso() {
  alert("Three seconds have elapsed.");
}

function borrarAlerta() {
  clearTimeout(identificadorDeTemporizador);
}

Traducido del artículo JavaScript Timing Events: setTimeout and setInterval