Hemos visto muchos ejemplos en los que utilizamos un timer en Javascript para lanzar un método una vez transcurridos cierto milisegundos. Son muy conocidos los ejemplos para construir un reloj, contando caracteres online,…
En todos estos ejemplos veíamos que había una invocación a la función .setTimeOut() del siguiente estilo:
window.setTimeout("escribir()",1000);
Como podemos apreciar la función .setTimeOut() recibe una cadena con la función a ejecutar en el callback y el tiempo en milisegundos en el cual hay que invocarla.
Pero qué sucede si queremos tener un setTimeout con parámetros. Es decir, que le podamos pasar una nueva información para ser utilizada en la función, ya que el siguiente código no funciona:
window.setTimeout("escribir(valor)",1000);
Podríamos realizar una primera aproximación que es definir la variable valor como global y que así tenga acceso cualquier método. Esta podría ser la de tirar por la calle del medio y quizás no nos interesase definir variables globales.
Para poder definir utilizar setTimeout con parámetros vamos a tener dos formas. Para ello vamos a crear una función que vuelque al log un segundo, así durante 10 segundos.
function escribir(valor) {
valor++;
console.log(valor);
if (valor < 10) {
// Timer
}
}
Función anonima
En este caso podemos definir dentro del .setTimeOut() una función anónima que sea la que invoque a la función .escribir() pasándole el parámetro.
if (valor < 10) {
window.setTimeout(function() {
escribir(valor);
},1000);
}
Vemos que se invoca a la función con el parámetro valor.
Como parámetro de setTimeout
Quizás sea lo más sencillo aunque es más desconocido, la idea es que la función .setTimeOut() permite que a partir del tercer parámetro se le pasen argumentos a la función de callback, los cuales se mapearán a los parámetros que esta función espere.
De esta forma el código Javascript quedaría de la siguiente forma:
if (valor < 10) {
window.setTimeout(escribir,1000,valor);
}
Así que ya hemos visto dos formas de poder invocar a la función setTimeout con parámetros.
