Diferencia entre setTimeout con y sin comillas y paréntesis

Estoy aprendiendo JavaScript y recientemente he aprendido sobre eventos de sincronización de JavaScript. Cuando me enteré setTimeouten W3Schools , noté una figura extraña con la que no me había encontrado antes. Están usando comillas dobles y luego llaman a la función.

Ejemplo:

setTimeout("alertMsg()", 3000);

Sé que las comillas dobles y simples en JavaScript significan una cadena.

También vi que puedo hacer lo mismo así:

setTimeout(alertMsg, 3000);

Con los paréntesis se refiere, sin los paréntesis se copia. Cuando estoy usando las comillas y los paréntesis, se está volviendo loco.

Me alegraría si alguien me puede explicar la diferencia entre estas tres formas de uso setTimeout:

Con los paréntesis:

setTimeout("alertMsg()", 3000);

Sin las comillas y los paréntesis:

setTimeout(alertMsg, 3000);

Y el tercero solo usa comillas:

setTimeout("alertMsg", 3000);

NB: Una mejor fuente de setTimeoutreferencia sería MDN .

Usando setIntervalosetTimeout

Debe pasar una referencia a una función como primer argumento para setTimeouto setInterval. Esta referencia puede ser en forma de:

• Una función anónima

  setTimeout(function(){/* Look mah! No name! */},2000);

• Un nombre de una función existente

  function foo(){...}
  
  setTimeout(foo, 2000);

• Una variable que apunta a una función existente.

  var foo = function(){...};
  
  setTimeout(foo, 2000);

  _{Tenga en cuenta que establezco "variable en una función" por separado del "nombre de la función". No es evidente que las variables y los nombres de las funciones ocupen el mismo espacio de nombres y puedan golpearse entre sí.}

Pasando argumentos

Para llamar a una función y pasar parámetros, puede llamar a la función dentro de la devolución de llamada asignada al temporizador:

setTimeout(function(){
  foo(arg1, arg2, ...argN);
}, 1000);

Hay otro método para pasar argumentos al controlador, sin embargo, no es compatible con varios navegadores .

setTimeout(foo, 2000, arg1, arg2, ...argN);

Contexto de devolución de llamada

Por defecto, el contexto de la devolución de llamada (el valor de thisdentro de la función llamada por el temporizador) cuando se ejecuta es el objeto global window. Si desea cambiarlo, úselo bind.

setTimeout(function(){
  this === YOUR_CONTEXT; // true
}.bind(YOUR_CONTEXT), 2000);

Seguridad

Aunque es posible, no debe pasar una cadena a setTimeouto setInterval. Pasar una cadena crea setTimeout()o setInterval()usa una funcionalidad similar a la eval()que ejecuta cadenas como secuencias de comandos , lo que hace posible la ejecución de secuencias de comandos arbitrarias y potencialmente dañinas.

Creo que la función setTimeout que escribes no se está ejecutando. si usa jquery, puede hacer que se ejecute correctamente haciendo esto:

    function alertMsg() {
      //your func
    }

    $(document).ready(function() {
       setTimeout(alertMsg,3000); 
       // the function you called by setTimeout must not be a string.
    });

Totalmente de acuerdo con Joseph.

Aquí hay un violín para probar esto: http://jsfiddle.net/nicocube/63s2s/

En el contexto del violín, el argumento de cadena no funciona, en mi opinión porque la función no está definida en el ámbito global.

Lo que sucede en realidad en caso de que pase una cadena como primer parámetro de función

setTimeout ( 'string', number)

Este valor del primer parámetro se evaluó cuando es hora de ejecutarse (después numberde transcurridos milisegundos). Básicamente es igual a

setTimeout ( eval('string'), number)

Esto es

una sintaxis alternativa que le permite incluir una cadena en lugar de una función, que se compila y ejecuta cuando expira el temporizador. Esta sintaxis no se recomienda por las mismas razones que hacen que el uso de eval () sea un riesgo para la seguridad.

Por lo tanto, las muestras a las que se refiere no son buenas muestras y se pueden dar en un contexto diferente o simplemente un error tipográfico.

Si invoca de esta manera setTimeout(something, number), el primer parámetro no es una cadena, sino un puntero a algo llamado something. Y nuevamente si somethinges una cadena, entonces se evaluará. Pero si es función, entonces la función se ejecutará. muestra jsbin

    ##If i want to wait for some response from server or any action we use setTimeOut.

    functionOne =function(){
    console.info("First");

    setTimeout(()=>{
    console.info("After timeOut 1");
    },5000);
    console.info("only setTimeOut() inside code waiting..");
    }

    functionTwo =function(){
    console.info("second");
    }
    functionOne();
    functionTwo();

## So here console.info("After timeOut 1"); will be executed after time elapsed.
Output:
******************************************************************************* 
First
only setTimeOut() inside code waiting..
second
undefined
After timeOut 1  // executed after time elapsed.

Con los paréntesis:

setTimeout("alertMsg()", 3000); // It work, here it treat as a function

Sin las comillas y los paréntesis:

setTimeout(alertMsg, 3000); // It also work, here it treat as a function

Y el tercero solo usa comillas:

setTimeout("alertMsg", 3000); // It not work, here it treat as a string

function alertMsg1() {
        alert("message 1");
    }
    function alertMsg2() {
        alert("message 2");
    }
    function alertMsg3() {
        alert("message 3");
    }
    function alertMsg4() {
        alert("message 4");
    }

    // this work after 2 second
    setTimeout(alertMsg1, 2000);

    // This work immediately
    setTimeout(alertMsg2(), 4000);

    // this fail
    setTimeout('alertMsg3', 6000);

    // this work after 8second
    setTimeout('alertMsg4()', 8000);

En el ejemplo anterior, primero llame a la función alertMsg2 () inmediatamente (le damos el tiempo de espera 4S pero no molesta) después de ese alertMsg1 () (Una espera de 2 segundos) y luego alertMsg4 () (Una espera de 8 segundos) pero alertMsg3 () no funciona porque lo colocamos entre comillas sin partes, por lo que se trata como una cadena.