7

Me encuentro actualmente mirando un tutorial de Javascript, el cual tiene una línea de código que no comprendo del todo.

El siguiente código es para que después de 3 segundos el navegador, suelte un alert con el mensaje correspondiente.

function muestraMensaje() {
  alert("Han transcurrido 3 segundos desde que me programaron");
}

setTimeout(muestraMensaje, 3000); //llama a la función sin paréntesis 

Realicé el mismo código sin volver a mirarlo y funcionaba incorrectamente, ya que no esperaba los 3 segundos y al momento de cargar la página otra vez de inmediato mostraba el mensaje.


Mirando mi código, me di cuenta que a diferencia del turorial, yo estaba llamando a la función con paréntesis:

setTimeout(muestraMensaje(), 3000);

Y al momento de retirarlos y poner el código como está en el tutorial, funciona correctamente, espera los segundos correspondientes y después muestra el mensaje.

¿Por qué con paréntesis, realiza lo solicitado de inmediato y no espera los 3 segundos, como lo hace cuando saco los paréntesis?


EDIT: Si bien en el tutorial, expresa lo siguiente:

Como es habitual, cuando se indica la referencia a la función no se incluyen los paréntesis, ya que de otro modo, se ejecuta la función en el mismo instante en que se establece el intervalo de ejecución.

Quisiera saber de todos modos por qué sucede eso. Ya que si fuera una función que recibiera parámetros funcionaría incorrectamente.

2 respuestas 2

8

Para responder a esto evaluemos como funciona setTimeout, setTimeout recibe 2 parámetros (1) una función que ejecutar y (2) el tiempo que quieres que espere para ejecutar esa función.

En este ejemplo se le envía la función que quieres que se ejecute y el tiempo de espera que quieres que se ejecute y por eso funciona correctamente

setTimeout(muestraMensaje, 3000);

y en este otro ejemplo ya no envías una función como primer parámetro sino que envías el resultado de la función, el código lo que hará es ejecutar la función porque tu mismo estas ejecutándola ya que eso hacen los paréntesis, en este caso la función no devuelve nada pero si devolviera algo eso es lo que se enviaria como parametro al setTimeout

setTimeout(muestraMensaje(), 3000);

Te pondré un ejemplo para darle mas sentido, para demostrar mas sencillo

function enviarMensaje(){
  console.log('Esto se ejecuta primero')
  return function(){
    console.log('Esto se ejecuta despues de 3 segundos')
  }
}

setTimeout(enviarMensaje(), 3000)

1
  • 4
    Corrección de acuerdo a la documentación en MDN sobre setTimeout y setInterval, después de especificar el parámetro de tiempo, se pueden añadir mas parámetros(opcionales) que se pasaran al función a ejecutar después o durante ese periodo de tiempo. Commented el 2 ene. 2020 a las 6:03
5

Los paréntesis "ejecutan" la función, en el ejemplo que pones arriba.

//La función "setTimeout" recibe el nombre de la función que se debe ejecutar 
//al pasar el tiempo establecido
setTimeout(muestraMensaje, 3000);

//Si tú pones paréntesis, entonces ejecutas la función, y el valor retornado 
//por la función es el valor que tomara setTimeout
setTimeout(muestraMensaje(), 3000);


//Por ejemplo, aquí declararé dos funciones

//Esta función no tiene valor de retorno, por lo cual será undefined
var fn1 = function(){
    alert("mensaje");
}
var fn2 = function(){
    return function(){
        alert("Un mensaje");
    }
}

//Entonces...

//Este timer esperará tres segundos e intentará ejecutar el valor pasado en el 
//primer argumento, lo cual hará correctamente porque
//fn1 es una función definida
setTimeout(fn1, 3000);

//Este timer esperará tres segundos e intentará ejecutar el valor pasado en el 
//primer argumento,
//sin embargo, aquí ejecuto fn1 cuando lo paso como argumento, y el valor 
//devuelto por fn1 ahora es el valor que recibe setiTimeout, en este caso undefined
setTimeout (fn1(), 3000);


//Pero en el timer siguiente, ejecutare la función fn2 al pasarla como 
//argumento, pero está función si tiene un valor de retorno explícito, el cual 
//es una función
setTimeout (fn2(), 3000);
//Entonces, la función se ejecuta, y el valor retornado por dicha función es 
//ahora el nuevo valor recibido por setTimeout.

En conclusión, con los paréntesis estás ejecutando inmediatamente la función, y sin los paréntesis estás pasando una "referencia" a la función que se ejecutará.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.