Temporizadores

Javascript cuenta con dos temporizadores setTimeout, setInterval.

setTimeout

Ejecuta una función después de un tiempo de espera especificado en milisegundos. Esta función únicamente se ejecuta una vez. El tiempo de espera mínimo es de 4ms.

/*
  setTimeout(función, tiempo de espera);
*/
setTimeout(function () {
  alert('Hola');
}, 2000);

Si queremos detener la ejecución función antes del tiempo de espera tenemos que utilizar clearTimeout.

clearTimeout(identificador_de_setTimeout);

¿Cómo obtenemos el identificador de setTimeout ?

Asignamos setTimeout a una variable. El identificador es el nombre de la variable.

/*
  var mi_funcion = setTimeout(función, tiempo de espera); 
 
  clearTimeout(mi_funcion);
*/

var titulo = document.getElementsByTagName('h2')[0];

var alerta = setTimeout(function () {
  alert('Hola');
}, 2000);      
 
titulo.addEventListener('click', function () {
  clearTimeout(alerta);
});

Ademas de utilizar funciones anónimas dentro de setTimeout también podemos utilizar funciones con nombre. Utilizamos el nombre de la función para llamarla. Esto nos permite tener más flexibilidad por si queremos utilizar estas funciones en otro contexto.

var titulo = document.getElementsByTagName('h2')[0];
var alerta = setTimeout(mostrar_mensaje, 2000);
  
function mostrar_mensaje() {
    alert('Hola');
}

function cancelar_setTimeout() {
  clearTimeout(alerta);
}
  
titulo.addEventListener('click', cancelar_setTimeout);

setInterval

Funciona de manera similar a setTimeout. La diferencia radica en que setInterval va a ejecutar la función de manera continua cada que transcurra el tiempo de espera especificado.

/*
setInterval(función, tiempo de espera);

Como setInterval ejecuta continuamente
la función, en lugar de utilizar una ventana emergente para mostrar el mensaje mejor 
lo mando a consola para evitar dar clic cada
que  se visualice.

*/
setInterval(function () {
  console.log('Hola');
}, 2000);

JavaScript también cuenta con una función que se encarga de detener la ejecución de setInterval. Esta función se llama clearInterval. Funciona de manera similar a clearTimeout.

clearInterval(identificador_de_setInterval);

Para utilizar clearInterval necesitamos identificar el temporizador que se quiere detener. El identificador de setInterval lo vamos a obtener de la misma manera que obtuvimos el identificador de setTimeout. Asignando setInterval a una variable y utilizando el nombre de la variable como identificador.

/*
  var mi_funcion = setInterval(función, tiempo de espera); 
 
  clearInterval(mi_funcion);
*/

var titulo = document.getElementsByTagName('h2')[0];
  
var alerta = setInterval(function () {
  console.log('Hola');
}, 2000);      

titulo.addEventListener('click', function () {
  clearInterval(alerta);
});

En setInterval también podemos utilizar funciones con nombre.

var titulo = document.getElementsByTagName('h2')[0];
var alerta = setInterval(mostrar_mensaje, 2000);

function mostrar_mensaje() {
  console.log('Hola');
}

function cancelar_setInterval() {
  clearInterval(alerta);
}
        
titulo.addEventListener('click', cancelar_setInterval);

Parámetros

¿Qué pasa si queremos utilizar parámetros en las funciones que se van a mandar llamar?

En cualquiera de las dos funciones, después de especificar el tiempo de espera podemos definir una lista de parámetros que se van a utilizar en la función especificada.

/*
  setTimeout(función, tiempo de espera, parametro1, parametro2);
*/

var titulo = document.getElementsByTagName('h2')[0];
var alerta = setTimeout(mostrar_mensaje, 2000, "Hola", "parámetros");

function mostrar_mensaje(parametro1, parametro2) {
  var mensaje = parametro1 + " " + parametro2; 
  alert(mensaje);
}

function cancelar_setInterval() {
  clearTimeout(alerta);
}

titulo.addEventListener('click', cancelar_setInterval);

/*
  setInterval(función, tiempo de espera, parametro1, parametro2);
*/

var titulo = document.getElementsByTagName('h2')[0];
var alerta = setInterval(mostrar_mensaje, 2000, "Hola", "parámetros");

function mostrar_mensaje(parametro1, parametro2) {
  var mensaje = parametro1 + " " + parametro2; 
  console.log(mensaje);
}

function cancelar_setInterval() {
  clearInterval(alerta);
}

titulo.addEventListener('click', cancelar_setInterval);

Pero esto no es compatible con oldie, si necesitamos habilitar esa compatibilidad necesitamos utilizar un polyfill.

setImmediate

Este método funciona como setTimeout sin asignar el tiempo de espera, para que la función especificada se ejecute al momento en que las tareas actuales o pendientes – si es que existe alguna – sean completadas.

Este método únicamente es compatible con IE10+ – msdn. Todavía no se implementa en Firefox ni en webkit – safari / chrome.

var titulo = document.getElementsByTagName('h2')[0];
var alerta = setImmediate(mostrar_mensaje, "Hola", "parámetros");

function mostrar_mensaje(parametro1, parametro2) {
  var mensaje = parametro1 + " " + parametro2; 
  console.log(mensaje);
}

function cancelar_setImmediate() {
  clearImmediate(alerta);
}

titulo.addEventListener('click', cancelar_setImmediate);

Descargar archivos de referencia.