javascript - not - Diferencia entre setTimeout con y sin comillas y paréntesis

timer jquery ejemplos

Question

Estoy aprendiendo JavaScript y he aprendido recientemente sobre los eventos de sincronización de JavaScript. Cuando aprendí sobre setTimeout en W3Schools , noté una figura extraña con la que no me había topado 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 significa 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 pudiera explicar la diferencia entre estas tres formas de usar 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 para referencia de setTimeout sería MDN .

Answer 1

Usando setInterval o setTimeout

Debe pasar una referencia a una función como el primer argumento para setTimeout o setInterval . Esta referencia puede ser en la 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 configuro "variable en una función" por separado de "nombre de función". No es aparente que las variables y los nombres de funciones ocupen el mismo espacio de nombres y puedan pegarse 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 this dentro de la función llamada por el temporizador) cuando se ejecuta es la window objeto global. Si quieres cambiarlo, usa bind .

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

Seguridad

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

Answer 2

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, la función alertMsg2 () llama inmediatamente (le damos el tiempo de espera 4S pero no nos molesta) después de ese alertMsg1 () (un tiempo de espera de 2 segundos) y luego alertMsg4 () (un tiempo de espera de 8 segundos) pero alertMsg3 () no funciona porque lo colocamos entre comillas sin partes, por lo que se trata como una cadena.

Answer 3

Creo que la función setTimeout que escribes no se está ejecutando. Si usas jquery, puedes hacerlo funcionar correctamente haciendo esto:

    function alertMsg() {
      //your func
    }

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

Answer 4

Totalmente de acuerdo con José.

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.